.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-divider{--divider-color:var( --e-global-color-secondary );}.elementor-widget-divider .elementor-divider__text{color:var( --e-global-color-secondary );font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-divider.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-secondary );}.elementor-widget-divider.elementor-view-framed .elementor-icon, .elementor-widget-divider.elementor-view-default .elementor-icon{color:var( --e-global-color-secondary );border-color:var( --e-global-color-secondary );}.elementor-widget-divider.elementor-view-framed .elementor-icon, .elementor-widget-divider.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-secondary );}.elementor-21273 .elementor-element.elementor-element-fb21bc8{--divider-border-style:solid;--divider-color:var( --e-global-color-primary );--divider-border-width:1px;}.elementor-21273 .elementor-element.elementor-element-fb21bc8 .elementor-divider-separator{width:100%;}.elementor-21273 .elementor-element.elementor-element-fb21bc8 .elementor-divider{padding-block-start:10px;padding-block-end:10px;}.elementor-21273 .elementor-element.elementor-element-fb21bc8 .elementor-divider__text{color:var( --e-global-color-text );font-family:"Roboto", Sans-serif;font-size:25px;font-weight:600;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}@media(max-width:767px){.elementor-21273 .elementor-element.elementor-element-fb21bc8 .elementor-divider{text-align:center;}.elementor-21273 .elementor-element.elementor-element-fb21bc8 .elementor-divider-separator{margin:0 auto;margin-center:0;}.elementor-21273 .elementor-element.elementor-element-fb21bc8 .elementor-divider__text{font-size:20px;}}/* Start custom CSS for html, class: .elementor-element-e708319 */Claude hat die Antwort abgeschlossen okay "Noch für euch da" klingt sehr negativ, ebenso die farbgebung stört mich noch, noch da kann grünlicher sein und umbau orange oder so Guter Punkt – „Noch für euch da" klingt nach Abschied, das wollen wir nicht. Und farblich ist deine Logik sinnvoll: „noch offen" grün (alles gut, kommt vorbei), „im Umbau" orange (Übergang). Ich dreh das um: Neue Farb-Logik: „Noch geöffnet" → grün (positiv, ihr könnt kommen) „Im Umbau" → orange (Übergang, geschlossen) „Termin steht" → gelb (bleibt) „Wieder offen" → grün-dunkel … Moment, das kollidiert. Kurz gedacht: Wenn „noch offen" grün ist und „wieder offen" auch grün, sehen die beiden gleich aus, obwohl sie das Gegenteil bedeuten. Lass uns das sauber trennen. Mein Vorschlag: „Noch geöffnet" → grün „Im Umbau" → orange „Termin steht" → gelb „Wieder offen" → blau (klar, festlich, unterscheidet sich von grün) Und für den Text statt „Noch für euch da" etwas Einladendes. Bevor ich baue, zwei kurze Entscheidungen: F: Welcher Text für die noch offenen Filialen? A: Aktuell für euch geöffnet F: Passt diese Farb-Logik? A: Wieder kann auch grün sein Verstanden – dann bleibt „Wieder offen" grün, und die noch offenen kriegen eine eigene Farbe, damit sich die beiden nicht verwechseln. Sinnvolle Trennung: „Aktuell für euch geöffnet" → hellgrün (noch offen) „Im Umbau" → orange (geschlossen, Übergang) „Termin steht" → gelb „Wieder offen" → kräftiges Grün (frisch eröffnet) So sind beide grün-Töne verwandt (beide = offen), aber klar unterscheidbar: hell = noch offen, kräftig = wieder offen. Ich passe CSS, HTML und Anleitung an. 3 Befehle ausgeführt · 1 Notiz 3 Befehle ausgeführt · 1 Notiz Die sed-Ersetzung hat sich verschluckt – die &-Zeichen im Ersetzungstext haben in sed eine Sonderbedeutung und den Text durcheinandergebracht. Ich baue die betroffenen Zeilen sauber neu, statt weiter mit sed zu hantieren. 5 Befehle ausgeführt, datei angesehen · 2 Notizen 5 Befehle ausgeführt, datei angesehen · 2 Notizen So sieht's jetzt auf dem Handy aus – zwei Karten nebeneinander, deutlich kompakter. Die Farben: Straubing hat den orangen Balken + oranges „Im Umbau"-Pill (geschlossen). Alle anderen haben den grünen Balken + grünes „Aktuell geöffnet"-Pill. Der Text ist jetzt einladend statt nach Abschied klingend. Mir fällt beim Rendern aber ein optisches Detail auf, das du wissen solltest: Der grüne Kreis-Effekt (das ist der Farbverlauf, den das Pill wirft) wirkt bei man Claudes Antwort wurde unterbrochen. hab mirs anders überlegt, erstmal die 5 Filialen, die 10 weiteren erstmal außen vor lassen Verstanden – zurück auf die 5 Hauptfilialen, die 10 weiteren lasse ich raus. Ich baue die HTML-Datei entsprechend zurück. Das CSS bleibt unverändert (die Farbanpassung von eben passt weiter). Kurz zum aktuellen Stand der 5, damit ich ihn richtig setze: Straubing → Im Umbau (orange), schon zu Homburg → Aktuell geöffnet (grün) Bad Mergentheim → Aktuell geöffnet (grün) Bochum → Aktuell geöffnet (grün) Ginsheim-Gustavsburg → Aktuell geöffnet (grün) 2 Befehle ausgeführt, datei lesen · 1 Notiz 2 Befehle ausgeführt, datei lesen · 1 Notiz Fertig – hier die zurückgebaute Version mit nur den 5 Hauptfilialen. Zum Einbauen: HTML-Widget: Inhalt durch wir-oeffnen-HTML-5-filialen.html ersetzen. Custom-CSS-Feld: wir-oeffnen-CSS-teil.css – das ist unverändert dasselbe wie zuletzt (grün für „geöffnet", orange für „im Umbau", zwei Karten nebeneinander auf Mobile). Falls du das CSS seit der Farbanpassung schon drin hast, musst du hier nichts tun. Aktueller Stand im Block: Straubing → Im Umbau (orange) Homburg, Bad Mergentheim, Bochum, Ginsheim-Gustavsburg → Aktuell geöffnet (grün) Für morgen, wenn Homburg und Bad Mergentheim schließen: In deren Karte die drei Zeilen von „Aktuell geöffnet" (grün) auf „Im Umbau" (orange) umstellen – Klasse ro-bevor → ro-umbau, Pill ro-p-bevor">Aktuell geöffnet → ro-p-umbau">Im Umbau, und den Statustext auf „Wir machen's schöner. Termin folgt in Kürze." Steht auch in der Pflege-Anleitung. Die 10 weiteren Filialen sind nur pausiert, nicht verloren – wenn du sie später doch aufnehmen willst, sag Bescheid, dann setze ich sie wieder ein. Wir oeffnen html 5 filialen Code · HTML Wir oeffnen css teil Code · CSS Claude ist eine KI und kann Fehler machen. Bitte überprüfe die Antworten. Wir oeffnen css teil · CSS .rofu-oeffnet{max-width:1000px;margin:0 auto;color:#241F1C} .rofu-oeffnet h2{line-height:1.14;margin:0 0 6px;font-weight:800;letter-spacing:-.01em} .rofu-oeffnet h3{margin:0} .rofu-oeffnet .ro-board{padding:10px 0 6px} .rofu-oeffnet .ro-hint{color:#554D45;margin:0 0 20px} .rofu-oeffnet .ro-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px} .rofu-oeffnet .ro-card{background:#fff;border:1px solid rgba(36,31,28,.10);border-radius:18px;padding:20px 20px 20px 22px;box-shadow:0 6px 20px rgba(36,31,28,.06);position:relative;overflow:hidden} .rofu-oeffnet .ro-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:#005490} .rofu-oeffnet .ro-bevor::before{background:#7DC24B} .rofu-oeffnet .ro-umbau::before{background:#F39200} .rofu-oeffnet .ro-termin::before{background:#FCD800} .rofu-oeffnet .ro-wieder::before{background:#3AAA35} .rofu-oeffnet .ro-pill{display:inline-block;text-transform:uppercase;letter-spacing:.05em;font-weight:700;font-size:.72em;padding:5px 12px;border-radius:999px;margin-bottom:12px} .rofu-oeffnet .ro-p-bevor{background:#EAF6E1;color:#4A7A26} .rofu-oeffnet .ro-p-umbau{background:#FDECD3;color:#B96A00} .rofu-oeffnet .ro-p-termin{background:#FCD800;color:#241F1C} .rofu-oeffnet .ro-p-wieder{background:#EAF6E9;color:#2b7d27} .rofu-oeffnet .ro-ort{font-weight:800;font-size:1.25em;line-height:1.12} .rofu-oeffnet .ro-region{text-transform:uppercase;letter-spacing:.06em;font-size:.68em;color:#857B70;font-weight:700;margin-top:3px;margin-bottom:12px} .rofu-oeffnet .ro-status{color:#554D45;margin:0 0 10px} .rofu-oeffnet .ro-adr{font-size:.88em;color:#857B70;margin:0 0 12px} .rofu-oeffnet .ro-link{display:inline-block;font-weight:700;color:#005490;text-decoration:none} .rofu-oeffnet .ro-link:hover{text-decoration:underline} .rofu-oeffnet .ro-faq{padding:38px 0 6px} .rofu-oeffnet .ro-faq h2{margin-bottom:16px} .rofu-oeffnet .ro-faq details{border:1px solid rgba(36,31,28,.10);border-radius:16px;background:#fff;margin-bottom:10px;overflow:hidden} .rofu-oeffnet .ro-faq summary{cursor:pointer;list-style:none;padding:16px 20px;font-weight:700;position:relative;padding-right:52px} .rofu-oeffnet .ro-faq summary::-webkit-details-marker{display:none} .rofu-oeffnet .ro-faq summary::after{content:"+";position:absolute;right:20px;top:11px;font-size:1.5em;font-weight:400;color:#E4000C} .rofu-oeffnet .ro-faq details[open] summary::after{content:"\2013"} .rofu-oeffnet .ro-ans{padding:0 20px 18px;color:#554D45} @media(max-width:640px){ .rofu-oeffnet .ro-grid{grid-template-columns:1fr 1fr;gap:10px} .rofu-oeffnet .ro-card{padding:16px 14px 16px 16px;border-radius:14px} .rofu-oeffnet .ro-ort{font-size:1.1em} .rofu-oeffnet .ro-pill{font-size:.62em;padding:4px 9px} .rofu-oeffnet .ro-faq{padding:28px 0 4px} } @media(max-width:380px){ .rofu-oeffnet .ro-grid{gap:8px} .rofu-oeffnet .ro-card{padding:14px 12px 14px 14px} }/* End custom CSS */ /* Start Custom Fonts CSS */@font-face { font-family: 'Roboto'; font-display: auto; src: url('https://www.rofu.de/unternehmen/wp-content/uploads/2024/12/Roboto-Regular.ttf') format('truetype'); } /* End Custom Fonts CSS */