/* Local SEO Agentur Vorlage. * * Geladen nach gestaltung.css und nur wirksam, wenn ausrichtung.vorlage auf * "local-seo-agentur" steht (das Attribut data-vorlage am ). * * Das Erscheinungsbild folgt den WordPress-Standortseiten der Agentur (Muster: * seo-agentur-neuss.de) - dieselben Farben, Schriftgrade, Abstaende, Raster, * Karten, Knoepfe und Bewegungen, hier aber als eigenes Stilblatt ohne fremdes * Geruest. Die Masse sind von dort abgenommen und stehen deshalb in Pixeln: * * Umbrueche 640 / 960 / 1200 / 1600 px * Rahmen 1200 px, schmal 900, breit 1400, weit 1600; Rand 15 / 20 / 40 px * Abschnitt 70 px Polster, ab 960 px 140 px * Farben Text #535353, Titel #2d2e33, Flaeche #f7f7f7, Linie #e5e5e7, * dunkel #303033 und #242427, Akzent #29ffaa * Schriften Alata (Titel, Vorspann), AR One Sans (Text), Montserrat * (Knoepfe, Navigation, Kennzeichnungen) * * Bewegung, die ein Skript braucht, liegt daneben in vorlage.js. Ohne Skript * und mit "Bewegung reduzieren" steht alles von Anfang an da. * * Die Schriften liegen unter schriften/ und werden vom eigenen Server * ausgeliefert: Die Inhaltsrichtlinie erlaubt font-src 'self', und so laedt * keine Seite beim Aufruf Daten ihrer Besucher zu einem fremden Dienst. * Lizenzen: schriften/LIZENZ.md. */ /* ---------- Schriften ---------- */ @font-face { font-family: "Alata"; font-style: normal; font-weight: 400; font-display: swap; src: url("schriften/alata-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Alata"; font-style: normal; font-weight: 400; font-display: swap; src: url("schriften/alata-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "AR One Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("schriften/ar-one-sans-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "AR One Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("schriften/ar-one-sans-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("schriften/montserrat-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("schriften/montserrat-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ---------- Tokens ---------- Der Stil (data-stil) bleibt waehlbar, aber die Vorlage gibt ihre eigenen Werte vor - sonst waere sie nicht wiedererkennbar. Wer einzelne Farben anpassen will, nimmt darstellung_setzen: das schreibt einen Inline-Style in den Dokumentkopf und steht damit auch hierueber. */ html[data-vorlage="local-seo-agentur"] { --farbe-kennzeichnung-auf-primaer: var(--farbe-akzent-hell); --farbe-text: #535353; --farbe-ruhig: #535353; --farbe-flaeche: #f7f7f7; --farbe-papier: #ffffff; --farbe-primaer: #303033; --farbe-primaer-dunkel: #242427; --farbe-akzent: #29ffaa; --farbe-akzent-hell: #29ffaa; --farbe-linie: #e5e5e7; /* Auf hellem Grund; auf dunklen Flaechen weiter unten umgesetzt, helle Karten in dunklen Abschnitten holen sich diese Werte zurueck. */ --farbe-titel-auf-hell: #2d2e33; --farbe-leise-auf-hell: #6f7076; --farbe-titel: var(--farbe-titel-auf-hell); --farbe-leise: var(--farbe-leise-auf-hell); --farbe-akzent-text: #0a7a4d; /* Der dunkle Mintton traegt als Grafik (5,38 auf Weiss). */ --farbe-akzent-dunkel: var(--farbe-akzent-text); --farbe-knopfschrift: #353535; --schrift-titel: "Alata", "Trebuchet MS", sans-serif; --schrift-text: "AR One Sans", "Segoe UI", system-ui, sans-serif; --schrift-akzent: "Montserrat", "Segoe UI", system-ui, sans-serif; --radius: 8px; --radius-knopf: 5px; --rahmen: 1200px; --rand: 15px; --polster: 70px; --schatten: none; } @media (min-width: 640px) { html[data-vorlage="local-seo-agentur"] { --rand: 20px; } } @media (min-width: 960px) { html[data-vorlage="local-seo-agentur"] { --rand: 40px; --polster: 140px; } } /* ---------- Grundlagen ---------- */ /* Der Rasterschleier des Standards passt nicht zu den grossflaechigen Fotos. */ [data-vorlage="local-seo-agentur"] body::before { display: none; } [data-vorlage="local-seo-agentur"] body { position: relative; font-size: 18px; line-height: 1.625; } [data-vorlage="local-seo-agentur"] a { color: var(--farbe-titel); text-decoration: none; } [data-vorlage="local-seo-agentur"] a:hover { color: #09090a; text-decoration: underline; text-decoration-thickness: auto; } [data-vorlage="local-seo-agentur"] :focus-visible { outline-color: var(--farbe-titel); } [data-vorlage="local-seo-agentur"] p { margin: 0 0 20px; } [data-vorlage="local-seo-agentur"] :is(h1, h2, h3, h4) { max-width: none; margin: 0 0 20px; color: var(--farbe-titel); font-weight: 600; letter-spacing: 0; text-wrap: balance; } [data-vorlage="local-seo-agentur"] h1 { font-family: var(--schrift-titel); font-size: 36.54px; line-height: 1.2; } [data-vorlage="local-seo-agentur"] h2 { font-family: var(--schrift-titel); font-size: 32.04px; line-height: 1.3; } [data-vorlage="local-seo-agentur"] h3 { font-family: var(--schrift-akzent); font-size: 20px; line-height: 1.4; letter-spacing: 1px; } [data-vorlage="local-seo-agentur"] h4 { font-family: var(--schrift-akzent); font-size: 20px; line-height: 1.4; letter-spacing: 1px; } @media (min-width: 960px) { [data-vorlage="local-seo-agentur"] h1 { font-size: 42px; } [data-vorlage="local-seo-agentur"] h2 { font-size: 36px; } } [data-vorlage="local-seo-agentur"] .rahmen { width: min(calc(100% - 2 * var(--rand)), var(--rahmen)); } [data-vorlage="local-seo-agentur"] .rahmen--weit { --rahmen: 1600px; } [data-vorlage="local-seo-agentur"] .abschnitt { padding: var(--polster) 0; } [data-vorlage="local-seo-agentur"] .abschnitt:has(> .fliesstext) { padding: 40px 0; } /* Vorspann: die Titelschrift in 20 px, wie der "Lead" des Musters. */ [data-vorlage="local-seo-agentur"] .vorspann { max-width: 600px; margin-bottom: 20px; color: var(--farbe-titel); font-family: var(--schrift-titel); font-size: 20px; line-height: 1.5; } /* Kennzeichnung ueber einer Ueberschrift: klein, fett, gesperrt - nicht in Versalien. */ [data-vorlage="local-seo-agentur"] .kicker { margin: 0 0 10px; color: var(--farbe-titel); font-family: var(--schrift-akzent); font-size: 18px; font-weight: 600; line-height: 1.4; letter-spacing: 1px; text-transform: none; } [data-vorlage="local-seo-agentur"] :is(.mikrotext, .fussnote, .quelle) { color: var(--farbe-text); font-size: 13px; line-height: 1.5; } [data-vorlage="local-seo-agentur"] .abschnittskopf { max-width: none; margin-bottom: 40px; } [data-vorlage="local-seo-agentur"] .abschnittskopf h2 { margin-bottom: 20px; } [data-vorlage="local-seo-agentur"] .abschnittskopf--mitte .vorspann { max-width: 600px; } [data-vorlage="local-seo-agentur"] .pillen li { border: 0; border-radius: 4px; padding: 2px 10px; color: #fff; background: var(--farbe-primaer); font-family: var(--schrift-akzent); font-size: 10px; font-weight: 600; line-height: 2.4; letter-spacing: 1px; } [data-vorlage="local-seo-agentur"] .pillen--akzent li { color: #323232; background: var(--farbe-akzent); } /* ---------- Schaltflaechen ---------- Rechteckig mit 5 px Rundung, Montserrat halbfett, 1 px gesperrt. Beim Ueberfahren wird die Flaeche durchsichtig und der Rand sichtbar. Die Hoehe (40 px, gross 55 px) kommt aus min-height statt aus der Zeilenhoehe des Musters - so bleibt ein Knopf lesbar, wenn seine Beschriftung auf dem Handy umbricht. */ [data-vorlage="local-seo-agentur"] .knopf { min-height: 40px; border: 1px solid transparent; border-radius: var(--radius-knopf); padding: 5px 20px; color: var(--farbe-knopfschrift); background: var(--farbe-akzent); font-family: var(--schrift-akzent); font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 1px; text-align: center; transition: color .1s ease-in-out, background-color .1s ease-in-out, border-color .1s ease-in-out; } [data-vorlage="local-seo-agentur"] .knopf:hover { border-color: var(--farbe-primaer); color: var(--farbe-primaer); background: transparent; text-decoration: none; } [data-vorlage="local-seo-agentur"] .knopf-klein { min-height: 40px; padding: 5px 20px; } [data-vorlage="local-seo-agentur"] :is(.knopf-gross, .herofoto .knopf, .kachelbereich .knopf, .plattformen .knopf, .kontaktband .knopf) { min-height: 55px; padding: 8px 40px; font-size: 20px; } [data-vorlage="local-seo-agentur"] .knopf .symbol { order: -1; width: 20px; height: 20px; margin: 0 5px 0 0; } /* Zweite Wahl: dunkel auf hellem Grund, weiss auf dunklem. */ [data-vorlage="local-seo-agentur"] :is(.knopf-sekundaer, .vorteile-text .knopf, .tipps-kopf .knopf, .teamwerte-spalte .knopf) { border-color: transparent; color: #fff; background: var(--farbe-primaer-dunkel); } [data-vorlage="local-seo-agentur"] :is(.knopf-sekundaer, .vorteile-text .knopf, .tipps-kopf .knopf, .teamwerte-spalte .knopf):hover { border-color: var(--farbe-primaer-dunkel); color: var(--farbe-primaer-dunkel); background: transparent; } [data-vorlage="local-seo-agentur"] .teamwerte-spalte .knopf { min-height: 55px; padding: 8px 40px; font-size: 20px; } [data-vorlage="local-seo-agentur"] .knopf-hell { border-color: transparent; color: var(--farbe-primaer-dunkel); background: #fff; } [data-vorlage="local-seo-agentur"] .knopf-hell:hover { border-color: #fff; color: #fff; background: transparent; } /* Dritte Wahl: leise Flaeche ("Direkt zum Formular"). */ [data-vorlage="local-seo-agentur"] .kontaktbereich-inhalt > .aktionsgruppe .knopf { min-height: 55px; padding: 8px 40px; color: var(--farbe-text); background: var(--farbe-flaeche); font-size: 20px; } [data-vorlage="local-seo-agentur"] .kontaktbereich-inhalt > .aktionsgruppe .knopf:hover { border-color: var(--farbe-linie); color: var(--farbe-titel); background: transparent; } [data-vorlage="local-seo-agentur"] .abschnitt--dunkel .knopf { color: #3d3d3d; background: var(--farbe-akzent); } [data-vorlage="local-seo-agentur"] .aktionsgruppe { gap: 10px; } [data-vorlage="local-seo-agentur"] .aktionsgruppe--unten { margin-top: 70px; } /* ---------- Kopfbereich ---------- Liegt durchsichtig im Startbild. vorlage.js macht aus der Leiste beim Zurueckscrollen eine weisse, feste Leiste (data-fest) und nimmt sie beim Weiterscrollen wieder weg (data-weg). */ .vorlagenkopf { position: absolute; z-index: 40; top: 0; right: 0; left: 0; } .vorlagenkopf-leiste { padding-top: 10px; transition: background-color .1s ease-in-out; } .vorlagenkopf-zeile { position: relative; display: flex; min-height: 80px; align-items: center; justify-content: space-between; gap: 30px; } .vorlagenkopf-marke { display: inline-flex; flex: 0 0 auto; align-items: center; } .vorlagenkopf-logo { display: block; width: 150px; height: auto; } .vorlagenkopf-logo--hell { display: none; } .vorlagenkopf-marke-text { color: #fff; font-family: var(--schrift-titel); font-size: 24px; text-decoration: none; } .vorlagenkopf .hauptnavigation { gap: 30px; color: rgb(255 255 255 / 86%); font-family: var(--schrift-akzent); font-size: 20px; font-weight: 600; letter-spacing: 1px; } .vorlagenkopf .hauptnavigation > a:not(.knopf) { color: inherit; text-decoration: none; transition: color .1s ease-in-out; } .vorlagenkopf .hauptnavigation > a:not(.knopf):hover { color: #fff; text-decoration: none; } .vorlagenkopf-kurzwahl { display: none; margin-left: auto; gap: 20px; align-items: center; } .vorlagenkopf-kurzwahl a { display: inline-flex; color: rgb(255 255 255 / 86%); } .vorlagenkopf-kurzwahl a:hover { color: #fff; } .vorlagenkopf-kurzwahl .symbol { width: 24px; height: 24px; } .vorlagenkopf .menueknopf { border: 0; padding: 10px 0; color: rgb(255 255 255 / 86%); background: transparent; cursor: pointer; } .menueknopf-striche { display: block; width: 24px; height: 2px; border-radius: 1px; background: currentColor; box-shadow: 0 7px currentColor, 0 -7px currentColor; } /* Feste Leiste beim Zurueckscrollen: weiss, dunkles Logo, dunkle Schrift. */ .vorlagenkopf-leiste[data-fest] { position: fixed; z-index: 40; top: 0; right: 0; left: 0; background: #fff; animation: vorlagenkopf-herein .5s ease-out both; } .vorlagenkopf-leiste[data-fest][data-weg] { animation: vorlagenkopf-hinaus .2s ease-in both; } @keyframes vorlagenkopf-herein { from { transform: translateY(-100%); } to { transform: none; } } @keyframes vorlagenkopf-hinaus { from { transform: none; } to { transform: translateY(-100%); } } .vorlagenkopf-leiste[data-fest] .vorlagenkopf-logo--dunkel { display: none; } .vorlagenkopf-leiste[data-fest] .vorlagenkopf-logo--hell { display: block; } .vorlagenkopf-leiste[data-fest] .vorlagenkopf-marke-text { color: var(--farbe-titel); } .vorlagenkopf-leiste[data-fest] .hauptnavigation { color: #313131; } .vorlagenkopf-leiste[data-fest] .hauptnavigation > a:not(.knopf):hover { color: #e3003a; } .vorlagenkopf-leiste[data-fest] :is(.menueknopf, .vorlagenkopf-kurzwahl a) { color: var(--farbe-titel); } @media (min-width: 960px) { .vorlagenkopf-logo { width: 300px; } } @media (max-width: 959px) { .vorlagenkopf-leiste { padding-top: 0; } .vorlagenkopf-kurzwahl { display: flex; } .vorlagenkopf .menueknopf { display: inline-flex; } .vorlagenkopf .hauptnavigation { position: absolute; z-index: 40; top: 100%; right: 0; left: 0; display: none; flex-direction: column; align-items: flex-start; gap: 0; border-radius: var(--radius); padding: 20px 30px 30px; color: var(--farbe-text); background: #fff; box-shadow: 0 14px 40px rgb(0 0 0 / 18%); font-size: 18px; } .vorlagenkopf .hauptnavigation[data-offen="true"] { display: flex; } .vorlagenkopf .hauptnavigation > a:not(.knopf) { padding: 8px 0; } .vorlagenkopf .hauptnavigation > a:not(.knopf):hover { color: var(--farbe-titel); } .vorlagenkopf .hauptnavigation .knopf { min-height: 40px; margin-top: 15px; padding: 5px 20px; font-size: 14px; } } /* ---------- Startbereich ---------- Polster wie im Muster: das des Abschnitts (70/140), oben zusaetzlich die Hoehe des Kopfes (80/100), der im Bild liegt. Das Foto traegt einen gleichmaessigen Schleier von 40 %, der Abschnitt endet unten mit 30 px Rundung. */ [data-vorlage="local-seo-agentur"] .herofoto { display: block; min-height: 0; overflow: hidden; border-radius: 0 0 30px 30px; padding: calc(var(--polster) + 80px) 0 var(--polster); background: var(--farbe-primaer); } [data-vorlage="local-seo-agentur"] .herofoto::after { background: rgb(0 0 0 / 40%); } [data-vorlage="local-seo-agentur"] .herofoto--leicht::after { background: rgb(0 0 0 / 25%); } [data-vorlage="local-seo-agentur"] .herofoto--stark::after { background: rgb(0 0 0 / 60%); } [data-vorlage="local-seo-agentur"] .herofoto-inhalt { --rahmen: 1600px; max-width: none; text-align: center; } [data-vorlage="local-seo-agentur"] .herofoto h1 { margin: 0; color: #fff; font-size: 56.61px; line-height: 1.1; text-wrap: wrap; } [data-vorlage="local-seo-agentur"] .herofoto .vorspann { margin: 20px auto; color: #fff; } [data-vorlage="local-seo-agentur"] .herofoto .kicker { color: #fff; } /* Dieselbe Kennzeichnung ist dunkel und gewinnt sonst auch auf dunklen Flaechen und im Kontaktband gegen die Regeln der Vorlage. */ [data-vorlage="local-seo-agentur"] :is(.abschnitt--dunkel, .einstieg--dunkel) .kicker { color: var(--farbe-akzent-hell); } [data-vorlage="local-seo-agentur"] .kontaktband .kicker { color: var(--farbe-kennzeichnung-auf-primaer); } /* Titel- und Leisefarbe dieser Vorlage sind dunkel; auf dunklen Flaechen stuenden sie sonst auf dunklem Grund (1,03 bis 1,14). */ [data-vorlage="local-seo-agentur"] :is(.abschnitt--dunkel, .einstieg--dunkel, .kontaktkarte, .kontaktband:not(.kontaktband--hell)) { --farbe-titel: var(--farbe-auf-primaer); --farbe-leise: rgb(255 255 255 / 92%); } /* Dieselbe Regel gilt sonst auch in den weissen Karten, die in einem dunklen Abschnitt stehen - dort stuende Weiss auf Weiss. Sie holen sich die hellen Werte zurueck. Dieselben Karten wie oben bei "background: #fff", dazu die Preisstufe und der Regionshinweis aus dem Stilblatt. */ [data-vorlage="local-seo-agentur"] :is(.abschnitt--dunkel, .einstieg--dunkel, .kontaktkarte, .kontaktband:not(.kontaktband--hell)) :is(.leistungskachel a, .plattformkarte, .vorteilskarte, .stimmenkarte, .linkkarte, .stelle, .preisstufe, .regionshinweis) { --farbe-titel: var(--farbe-titel-auf-hell); --farbe-leise: var(--farbe-leise-auf-hell); } /* Mikrotext, Fussnote und Quelle traegt die Vorlage in der Textfarbe (#535353); auf dunklem Grund sind das 2,01:1. Dort gilt die Leisefarbe der Flaeche. */ [data-vorlage="local-seo-agentur"] :is(.abschnitt--dunkel, .einstieg--dunkel, .kontaktkarte, .kontaktband:not(.kontaktband--hell)) :is(.mikrotext, .fussnote, .quelle) { color: var(--farbe-leise); } /* Das helle Band traegt den Mintton nur als Flaeche, nicht als Schrift. */ [data-vorlage="local-seo-agentur"] .kontaktband--hell { --farbe-kennzeichnung-auf-primaer: var(--farbe-akzent-text); } [data-vorlage="local-seo-agentur"] .herofoto .aktionsgruppe { justify-content: center; margin-top: 40px; } @media (max-width: 639px) { [data-vorlage="local-seo-agentur"] .herofoto .aktionsgruppe .knopf { min-width: 192px; } [data-vorlage="local-seo-agentur"] :is(.knopf-gross, .herofoto .knopf, .kachelbereich .knopf, .plattformen .knopf, .kontaktband .knopf, .teamwerte-spalte .knopf) { padding-inline: 20px; } } @media (min-width: 960px) { /* Oben kommt die Hoehe des Kopfes dazu, der im Bild liegt. */ [data-vorlage="local-seo-agentur"] .herofoto { padding-top: calc(var(--polster) + 100px); } [data-vorlage="local-seo-agentur"] .herofoto h1 { font-size: 66.6px; } [data-vorlage="local-seo-agentur"] .herofoto--links .herofoto-inhalt { text-align: left; } [data-vorlage="local-seo-agentur"] .herofoto--links .vorspann { margin-left: 0; } [data-vorlage="local-seo-agentur"] .herofoto--links .aktionsgruppe { justify-content: flex-start; } } @media (min-width: 1200px) { [data-vorlage="local-seo-agentur"] .herofoto h1 { font-size: 108px; } } /* ---------- Versprechen ---------- Grosse Aussage, Vorspann, Zwischenzeile als Titel, vier Spalten. Die Spalten fliegen beim Scrollen ein und wieder hinaus (vorlage.js). */ [data-vorlage="local-seo-agentur"] .versprechen { overflow: hidden; padding-top: calc(var(--polster) + 30px); } [data-vorlage="local-seo-agentur"] .versprechen > .rahmen { --rahmen: 100vw; } [data-vorlage="local-seo-agentur"] .versprechen-kopf { max-width: none; } [data-vorlage="local-seo-agentur"] .versprechen-kopf h2 { font-size: 47.52px; line-height: 1.1; } [data-vorlage="local-seo-agentur"] .versprechen-zwischentitel { margin: 40px 0 0; color: var(--farbe-titel); font-family: var(--schrift-titel); font-size: 36.54px; font-weight: 600; line-height: 1.2; letter-spacing: 0; text-transform: none; } [data-vorlage="local-seo-agentur"] .versprechen-spalten { grid-template-columns: 1fr; gap: 40px 20px; margin-top: 70px; } [data-vorlage="local-seo-agentur"] .versprechen-spalten h3 { margin-bottom: 10px; font-size: 28px; letter-spacing: 0; } [data-vorlage="local-seo-agentur"] .versprechen-spalten p { margin-top: 20px; } @media (min-width: 640px) { [data-vorlage="local-seo-agentur"] .versprechen-spalten { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 960px) { [data-vorlage="local-seo-agentur"] .versprechen-kopf h2 { font-size: 57.6px; } [data-vorlage="local-seo-agentur"] .versprechen-zwischentitel { font-size: 42px; } [data-vorlage="local-seo-agentur"] .versprechen-spalten { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 1200px) { [data-vorlage="local-seo-agentur"] .versprechen-kopf h2 { font-size: 72px; } [data-vorlage="local-seo-agentur"] .versprechen-spalten { gap: 40px; margin-top: 140px; } } /* ---------- Karten: gemeinsames Aussehen ---------- */ [data-vorlage="local-seo-agentur"] :is(.leistungskachel a, .plattformkarte, .vorteilskarte, .stimmenkarte, .linkkarte, .stelle) { border: 1px solid var(--farbe-linie); border-radius: var(--radius); padding: 20px; color: var(--farbe-text); background: #fff; box-shadow: none; transition: color .1s ease-in-out, background-color .1s ease-in-out, border-color .1s ease-in-out; } @media (min-width: 1200px) { [data-vorlage="local-seo-agentur"] :is(.leistungskachel a, .plattformkarte, .vorteilskarte, .stimmenkarte, .linkkarte, .stelle) { padding: 40px; } } [data-vorlage="local-seo-agentur"] :is(.leistungskachel--dunkel a, .vorteilskarte--dunkel) { border-color: transparent; color: rgb(255 255 255 / 70%); background: var(--farbe-primaer); } [data-vorlage="local-seo-agentur"] :is(.leistungskachel--dunkel a, .vorteilskarte--dunkel) :is(h3, .leistungskachel-titel) { color: #fff; } /* ---------- Leistungen als Kacheln ---------- */ [data-vorlage="local-seo-agentur"] .kachelbereich > .rahmen { --rahmen: 1600px; } [data-vorlage="local-seo-agentur"] .kachelbereich .abschnittskopf { margin-bottom: 20px; } [data-vorlage="local-seo-agentur"] .kachelbereich .abschnittskopf h2 { margin-bottom: 10px; } [data-vorlage="local-seo-agentur"] .leistungskacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } [data-vorlage="local-seo-agentur"] .leistungskachel a { gap: 0; align-content: start; } [data-vorlage="local-seo-agentur"] .leistungskachel a:hover { border-color: var(--farbe-primaer); box-shadow: none; text-decoration: none; } [data-vorlage="local-seo-agentur"] .leistungskachel-symbol img { display: block; width: 68px; height: 68px; } [data-vorlage="local-seo-agentur"] .leistungskachel-titel { margin-top: 20px; color: var(--farbe-titel); font-family: var(--schrift-akzent); font-size: 18px; font-weight: 600; line-height: 1.4; letter-spacing: 1px; hyphens: auto; } [data-vorlage="local-seo-agentur"] .leistungskachel-stichworte { margin-top: 10px; color: var(--farbe-leise); font-family: var(--schrift-akzent); font-size: 11px; font-weight: 600; line-height: 1.4; letter-spacing: 1px; } [data-vorlage="local-seo-agentur"] .leistungskachel-titel:first-child { margin-top: 0; } [data-vorlage="local-seo-agentur"] .leistungskachel--dunkel .leistungskachel-stichworte { color: rgb(255 255 255 / 50%); } @media (min-width: 640px) { [data-vorlage="local-seo-agentur"] .leistungskacheln { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 960px) { [data-vorlage="local-seo-agentur"] .leistungskacheln { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 1200px) { [data-vorlage="local-seo-agentur"] .leistungskacheln { grid-template-columns: repeat(5, minmax(0, 1fr)); } } @media (max-width: 760px) { [data-vorlage="local-seo-agentur"] .leistungskachel a { padding: 20px; } } /* ---------- Plattformen ---------- */ [data-vorlage="local-seo-agentur"] .plattformen { border-radius: 0 0 30px 30px; } [data-vorlage="local-seo-agentur"] .plattformen > .rahmen { --rahmen: 1400px; } [data-vorlage="local-seo-agentur"] .plattformen .abschnittskopf { margin-bottom: 70px; } [data-vorlage="local-seo-agentur"] .plattformen .abschnittskopf h2 { margin-bottom: 10px; } [data-vorlage="local-seo-agentur"] :is(.plattformen, .kachelbereich) .abschnittskopf h2 { font-size: 36.54px; line-height: 1.2; } @media (min-width: 960px) { [data-vorlage="local-seo-agentur"] :is(.plattformen, .kachelbereich) .abschnittskopf h2 { font-size: 42px; } } /* Ziertrenner unter dem Kopf: zwei Linien mit einem Kreuz in der Mitte. */ [data-vorlage="local-seo-agentur"] .plattformen .abschnittskopf::after, [data-vorlage="local-seo-agentur"] .plattformen > .rahmen::after { display: block; width: min(300px, 100%); height: 20px; margin: 20px auto 0; content: ""; background: linear-gradient(var(--farbe-linie), var(--farbe-linie)) left center / calc(50% - 20px) 1px no-repeat, linear-gradient(var(--farbe-linie), var(--farbe-linie)) right center / calc(50% - 20px) 1px no-repeat, url("data:image/svg+xml;charset=UTF-8,%3Csvg width='10' height='10' viewBox='0 0 10 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='none' stroke='%23303033' stroke-width='1.1' d='M0 0l10 10M10 0L0 10'/%3E%3C/svg%3E") center / 10px 10px no-repeat; } [data-vorlage="local-seo-agentur"] .plattformen > .rahmen::after { margin-top: 70px; } [data-vorlage="local-seo-agentur"] .plattformkarten { grid-template-columns: 1fr; gap: 20px; } [data-vorlage="local-seo-agentur"] .plattformkarte { gap: 20px; } [data-vorlage="local-seo-agentur"] .plattformkarte-logo img { width: 100%; max-height: none; } [data-vorlage="local-seo-agentur"] .plattformkarte-name { display: none; } [data-vorlage="local-seo-agentur"] .plattformkarte-text { color: var(--farbe-leise); font-family: var(--schrift-akzent); font-size: 11px; font-weight: 600; line-height: 1.4; letter-spacing: 1px; opacity: 1; } @media (min-width: 640px) { [data-vorlage="local-seo-agentur"] .plattformkarten { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 960px) { [data-vorlage="local-seo-agentur"] .plattformkarten { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* ---------- Vorteile mit Grafik ---------- */ [data-vorlage="local-seo-agentur"] .vorteile { padding: calc(var(--polster) + 30px) 0 calc(var(--polster) + 20px); } [data-vorlage="local-seo-agentur"] .vorteile > .rahmen { --rahmen: 1600px; } [data-vorlage="local-seo-agentur"] .vorteile-kopf { grid-template-columns: 1fr; gap: 40px; margin-bottom: 40px; text-align: center; } [data-vorlage="local-seo-agentur"] .vorteile-text h2 { max-width: 450px; margin-inline: auto; font-size: 36.54px; line-height: 1.2; } [data-vorlage="local-seo-agentur"] .vorteile-text .vorspann { max-width: 450px; margin-inline: auto; } [data-vorlage="local-seo-agentur"] .vorteile-text .aktionsgruppe { justify-content: center; margin-top: 40px; } [data-vorlage="local-seo-agentur"] .vorteile-grafik { text-align: center; } [data-vorlage="local-seo-agentur"] .vorteile-grafik > img { display: inline-block; width: min(500px, 100%); border-radius: 0; } /* Das Signet schwebt nicht mehr im Takt, es wandert mit dem Scrollen (vorlage.js). */ [data-vorlage="local-seo-agentur"] .vorteile-zeichen { top: 55%; right: 7vw; bottom: auto; width: min(495px, 45%); animation: none; pointer-events: none; } [data-vorlage="local-seo-agentur"] .vorteilskarten { grid-template-columns: 1fr; gap: 20px; } [data-vorlage="local-seo-agentur"] .vorteilskarte { position: relative; z-index: 1; } [data-vorlage="local-seo-agentur"] .vorteilskarte h3 { margin: 20px 0 0; } [data-vorlage="local-seo-agentur"] .vorteilskarte p { margin: 20px 0 0; color: inherit; } @media (min-width: 640px) { [data-vorlage="local-seo-agentur"] .vorteilskarten { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 960px) { [data-vorlage="local-seo-agentur"] .vorteile-kopf { grid-template-columns: 1fr 2fr; align-items: center; text-align: left; } [data-vorlage="local-seo-agentur"] .vorteile-text :is(h2, .vorspann) { margin-inline: 0; } [data-vorlage="local-seo-agentur"] .vorteile-text h2 { font-size: 42px; } [data-vorlage="local-seo-agentur"] .vorteile-text .aktionsgruppe { justify-content: flex-start; } [data-vorlage="local-seo-agentur"] .vorteilskarten { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* ---------- Schieber und Bildband ---------- Die Bilder stehen mittig und schnappen dort ein; die Pfeile liegen links und rechts auf dem Band. Der Halteknopf (WCAG 2.2.2) bleibt, klein und mittig am unteren Rand des Bandes. */ [data-vorlage="local-seo-agentur"] .bildband .abschnittskopf { margin-bottom: 0; } [data-vorlage="local-seo-agentur"] .bildband .abschnittskopf h2 { font-size: 38.4px; line-height: 1.2; } [data-vorlage="local-seo-agentur"] .bildband .abschnittskopf--mitte .vorspann { max-width: 600px; margin-top: 40px; } [data-vorlage="local-seo-agentur"] .bildband-hinweis { max-width: 600px; margin: 20px auto 0; color: var(--farbe-leise); font-size: 13px; line-height: 1.5; text-align: center; } [data-vorlage="local-seo-agentur"] .bildband-band { margin-top: 70px; } [data-vorlage="local-seo-agentur"] .schieber-spur { gap: 10px; padding: 0 max((100% - min(800px, 88vw)) / 2, 15px); } [data-vorlage="local-seo-agentur"] .schieber-spur > * { scroll-snap-align: center; } [data-vorlage="local-seo-agentur"] .bildband-spur { grid-auto-columns: min(800px, 88vw); } [data-vorlage="local-seo-agentur"] .bildband-spur--3-2 { grid-auto-columns: min(832px, 88vw); padding-inline: max((100% - min(832px, 88vw)) / 2, 15px); } [data-vorlage="local-seo-agentur"] .bildband-eintrag img { border-radius: 0; } [data-vorlage="local-seo-agentur"] .bildband-eintrag figcaption { color: var(--farbe-leise); font-family: var(--schrift-akzent); font-size: 11px; font-weight: 600; letter-spacing: 1px; text-align: center; } [data-vorlage="local-seo-agentur"] .schieber-steuerung { position: absolute; inset: 0; display: block; margin: 0; pointer-events: none; } [data-vorlage="local-seo-agentur"] .schieber-knopf { position: absolute; top: 50%; width: 34px; height: 34px; border: 0; border-radius: 0; color: rgb(255 255 255 / 70%); background: transparent; transform: translateY(-50%); pointer-events: auto; transition: color .1s ease-in-out; } [data-vorlage="local-seo-agentur"] .schieber-knopf:hover { border: 0; color: #fff; } [data-vorlage="local-seo-agentur"] .schieber-knopf .symbol { width: 28px; height: 28px; filter: drop-shadow(0 1px 3px rgb(0 0 0 / 45%)); } [data-vorlage="local-seo-agentur"] .schieber-knopf[data-schieber-zurueck] { left: max((100% - min(800px, 88vw)) / 2 + 30px, 20px); } [data-vorlage="local-seo-agentur"] .schieber-knopf[data-schieber-vor] { right: max((100% - min(800px, 88vw)) / 2 + 30px, 20px); } [data-vorlage="local-seo-agentur"] .bewegung-pause--rund { position: absolute; bottom: 15px; left: 50%; transform: translateX(-50%); pointer-events: auto; } @media (max-width: 639px) { [data-vorlage="local-seo-agentur"] .schieber-knopf { display: none; } } @media (min-width: 960px) { [data-vorlage="local-seo-agentur"] .bildband .abschnittskopf h2 { font-size: 48px; } } /* ---------- Kundenstimmen ---------- */ [data-vorlage="local-seo-agentur"] .stimmenspur { grid-auto-columns: min(900px, 88vw); padding-inline: max((100% - min(900px, 88vw)) / 2, 15px); } [data-vorlage="local-seo-agentur"] .stimmenkarte-firma { color: var(--farbe-titel); font-size: 28px; font-weight: 600; line-height: 1.4; } [data-vorlage="local-seo-agentur"] .stimmenkarte-zitat { color: var(--farbe-titel); font-family: var(--schrift-titel); font-size: 20px; line-height: 1.5; } [data-vorlage="local-seo-agentur"] .stimmenkarte-person { color: var(--farbe-text); font-size: 18px; font-weight: 400; } /* ---------- Ablauf ---------- Links Ueberschrift und Vorspann, rechts die Schritte zu zweit nebeneinander - ohne Kasten und Nummer, wie im Muster. */ [data-vorlage="local-seo-agentur"] #ablauf .rahmen > div { display: grid; gap: 40px; } [data-vorlage="local-seo-agentur"] #ablauf .abschnittskopf { margin: 0; text-align: center; } [data-vorlage="local-seo-agentur"] #ablauf .abschnittskopf .vorspann { max-width: 450px; margin-inline: auto; } [data-vorlage="local-seo-agentur"] .ablaufkarten { grid-template-columns: 1fr; gap: 40px; text-align: center; } [data-vorlage="local-seo-agentur"] .ablaufkarte { border: 0; border-radius: 0; padding: 0; background: transparent; box-shadow: none; } [data-vorlage="local-seo-agentur"] .ablaufkarte::before { display: none; } [data-vorlage="local-seo-agentur"] .ablaufkarte h3 { margin: 20px 0 0; } [data-vorlage="local-seo-agentur"] .ablaufkarte p { margin: 10px 0 0; } [data-vorlage="local-seo-agentur"] .ablauf-ergebnis { font-size: 13px; line-height: 1.5; } @media (min-width: 640px) { [data-vorlage="local-seo-agentur"] .ablaufkarten { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 960px) { [data-vorlage="local-seo-agentur"] #ablauf { padding-bottom: 0; } [data-vorlage="local-seo-agentur"] #ablauf .rahmen > div { grid-template-columns: 1fr 2fr; gap: 70px; align-items: start; } [data-vorlage="local-seo-agentur"] #ablauf .abschnittskopf, [data-vorlage="local-seo-agentur"] .ablaufkarten { text-align: left; } [data-vorlage="local-seo-agentur"] #ablauf .abschnittskopf .vorspann { margin-inline: 0; } [data-vorlage="local-seo-agentur"] .ablaufkarten { gap: 70px; } } /* ---------- Aufruf ---------- Grosse mittige Frage, Vorspann, ein grosser Knopf; darunter eine Linie. */ [data-vorlage="local-seo-agentur"] .kontaktband--hell { background: transparent; } [data-vorlage="local-seo-agentur"] .kontaktband > .rahmen { --rahmen: 1400px; display: block; border-bottom: 1px solid var(--farbe-linie); padding-bottom: var(--polster); text-align: center; } [data-vorlage="local-seo-agentur"] .kontaktband { padding-bottom: 0; } [data-vorlage="local-seo-agentur"] .kontaktband h2 { margin: 0; font-size: 47.52px; line-height: 1.1; } [data-vorlage="local-seo-agentur"] .kontaktband p { max-width: 450px; margin: 20px auto; color: var(--farbe-titel); font-family: var(--schrift-titel); font-size: 20px; line-height: 1.5; } [data-vorlage="local-seo-agentur"] .kontaktband .aktionsgruppe { justify-content: center; margin-top: 40px; } [data-vorlage="local-seo-agentur"] .kontaktband--hell .knopf { color: var(--farbe-knopfschrift); background: var(--farbe-akzent); } [data-vorlage="local-seo-agentur"] .kontaktband--hell .knopf:hover { color: var(--farbe-primaer); background: transparent; } @media (min-width: 960px) { [data-vorlage="local-seo-agentur"] .kontaktband h2 { font-size: 57.6px; } } @media (min-width: 1200px) { [data-vorlage="local-seo-agentur"] .kontaktband h2 { font-size: 72px; } [data-vorlage="local-seo-agentur"] .kontaktband .aktionsgruppe { margin-top: 70px; } } /* ---------- Team, Werte, Stellen ---------- */ [data-vorlage="local-seo-agentur"] .teamwerte-raster { grid-template-columns: 1fr; gap: 40px; } [data-vorlage="local-seo-agentur"] .teamwerte-spalte { position: static; text-align: center; } [data-vorlage="local-seo-agentur"] .teamwerte-spalte h2 { font-size: 38.4px; line-height: 1.2; } [data-vorlage="local-seo-agentur"] .teamwerte-spalte .vorspann { margin-inline: auto; } [data-vorlage="local-seo-agentur"] .teamwerte-spalte .aktionsgruppe { justify-content: center; margin-top: 40px; } [data-vorlage="local-seo-agentur"] .teamwerte-inhalt { gap: 0; } [data-vorlage="local-seo-agentur"] .teamportraits { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: start; } [data-vorlage="local-seo-agentur"] .teamportraits img { border-radius: 5px; } [data-vorlage="local-seo-agentur"] .teamportrait-name { margin-top: 10px; color: var(--farbe-titel); font-family: var(--schrift-akzent); font-size: 18px; font-weight: 600; line-height: 1.4; letter-spacing: 1px; } [data-vorlage="local-seo-agentur"] .teamportrait-rolle { color: var(--farbe-leise); font-family: var(--schrift-akzent); font-size: 11px; font-weight: 600; line-height: 1.4; letter-spacing: 1px; } /* Jeder weitere Block beginnt mit dem Ziertrenner. */ [data-vorlage="local-seo-agentur"] .teamwerte-block::before { display: block; height: 20px; margin: 40px 0; content: ""; background: linear-gradient(var(--farbe-linie), var(--farbe-linie)) left center / calc(50% - 20px) 1px no-repeat, linear-gradient(var(--farbe-linie), var(--farbe-linie)) right center / calc(50% - 20px) 1px no-repeat, url("data:image/svg+xml;charset=UTF-8,%3Csvg width='10' height='10' viewBox='0 0 10 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='none' stroke='%23303033' stroke-width='1.1' d='M0 0l10 10M10 0L0 10'/%3E%3C/svg%3E") center / 10px 10px no-repeat; } [data-vorlage="local-seo-agentur"] .teamwerte-block > h3 { margin-bottom: 40px; font-family: var(--schrift-titel); font-size: 32.04px; line-height: 1.3; letter-spacing: 0; text-align: center; } [data-vorlage="local-seo-agentur"] .wertekarten { grid-template-columns: 1fr; gap: 40px; text-align: center; } [data-vorlage="local-seo-agentur"] .wertekarten h4 { margin: 0; font-family: var(--schrift-akzent); font-size: 20px; } [data-vorlage="local-seo-agentur"] .wertekarten p { margin: 10px 0 0; } [data-vorlage="local-seo-agentur"] .stellenliste { grid-template-columns: 1fr; gap: 20px; } [data-vorlage="local-seo-agentur"] .stelle:hover { border-color: var(--farbe-primaer); } [data-vorlage="local-seo-agentur"] .stelle-titel { color: var(--farbe-titel); font-family: var(--schrift-akzent); font-size: 20px; font-weight: 600; letter-spacing: 1px; } [data-vorlage="local-seo-agentur"] .stelle-ort { color: var(--farbe-leise); font-family: var(--schrift-akzent); font-size: 11px; font-weight: 600; letter-spacing: 1px; } @media (min-width: 640px) { [data-vorlage="local-seo-agentur"] .wertekarten, [data-vorlage="local-seo-agentur"] .stellenliste { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 960px) { [data-vorlage="local-seo-agentur"] .teamwerte-raster { grid-template-columns: 2fr 3fr; gap: 70px; } [data-vorlage="local-seo-agentur"] .teamwerte-spalte { position: sticky; top: 50px; text-align: left; } [data-vorlage="local-seo-agentur"] .teamwerte-spalte h2 { font-size: 48px; } [data-vorlage="local-seo-agentur"] .teamwerte-spalte .vorspann { margin-inline: 0; } [data-vorlage="local-seo-agentur"] .teamwerte-spalte .aktionsgruppe { justify-content: flex-start; } /* Versetztes Mauerwerk: die rechte Spalte haengt tiefer und holt beim Scrollen auf (vorlage.js). */ [data-vorlage="local-seo-agentur"] .teamportraits > li:nth-child(even) { margin-top: 60px; } [data-vorlage="local-seo-agentur"] .teamwerte-block::before { margin: 70px 0; } [data-vorlage="local-seo-agentur"] .teamwerte-block > h3 { font-size: 36px; text-align: left; } [data-vorlage="local-seo-agentur"] .wertekarten { gap: 70px; text-align: left; } } /* ---------- Aufklappbares: Tipps, Anfahrt, Fragen ---------- Titel in der Titelschrift, Plus und Minus am rechten Rand, feine Linie zwischen den Eintraegen. */ [data-vorlage="local-seo-agentur"] :is(.tipp, .faq-eintrag) { border: 0; } [data-vorlage="local-seo-agentur"] :is(.tipp, .faq-eintrag) + :is(.tipp, .faq-eintrag) { margin-top: 20px; border-top: 1px solid var(--farbe-linie); padding-top: 20px; } [data-vorlage="local-seo-agentur"] .faq { border-top: 0; } [data-vorlage="local-seo-agentur"] :is(.tipp, .faq-eintrag) summary { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 0; color: var(--farbe-titel); font-family: var(--schrift-titel); font-size: 20px; font-weight: 600; line-height: 1.4; list-style: none; cursor: pointer; } [data-vorlage="local-seo-agentur"] :is(.tipp, .faq-eintrag) summary::-webkit-details-marker { display: none; } [data-vorlage="local-seo-agentur"] :is(.tipp, .faq-eintrag) summary::marker { content: ""; } [data-vorlage="local-seo-agentur"] :is(.tipp, .faq-eintrag) summary::after { position: static; flex: 0 0 13px; width: 13px; height: 13px; content: ""; background: linear-gradient(currentColor, currentColor) center / 13px 1px no-repeat, linear-gradient(currentColor, currentColor) center / 1px 13px no-repeat; } [data-vorlage="local-seo-agentur"] :is(.tipp, .faq-eintrag)[open] summary::after { content: ""; background: linear-gradient(currentColor, currentColor) center / 13px 1px no-repeat; } [data-vorlage="local-seo-agentur"] :is(.tipp .fliesstext, .faq-antwort) { margin-top: 20px; padding: 0; color: var(--farbe-text); } [data-vorlage="local-seo-agentur"] :is(.tipp .fliesstext, .faq-antwort) > :last-child { margin-bottom: 0; } [data-vorlage="local-seo-agentur"] :is(.tipp .fliesstext, .faq-antwort) a { font-weight: 700; } /* ---------- Regionale Tipps ---------- */ [data-vorlage="local-seo-agentur"] .tipps-kopf { align-items: center; gap: 20px 40px; margin-bottom: 40px; text-align: center; justify-content: center; } [data-vorlage="local-seo-agentur"] .tipps-kopf h2 { margin: 0; } [data-vorlage="local-seo-agentur"] .tipps-kopf .vorspann { max-width: none; margin: 20px 0 0; } [data-vorlage="local-seo-agentur"] .tipps-titel { margin-bottom: 40px; font-family: var(--schrift-titel); font-size: 28px; line-height: 1.4; letter-spacing: 0; } [data-vorlage="local-seo-agentur"] .tipps-liste { grid-template-columns: 1fr; gap: 0 40px; align-items: start; } [data-vorlage="local-seo-agentur"] .linkkarte { margin-top: 40px; background: #fff; } [data-vorlage="local-seo-agentur"] .linkkarte h3 { margin: 20px 0 0; font-family: var(--schrift-titel); font-size: 28px; line-height: 1.4; letter-spacing: 0; } [data-vorlage="local-seo-agentur"] .linkkarte p { margin: 20px 0 0; color: var(--farbe-leise); font-family: var(--schrift-akzent); font-size: 11px; font-weight: 600; line-height: 1.4; letter-spacing: 1px; } [data-vorlage="local-seo-agentur"] .linkkarte-liste { display: block; margin-top: 20px; padding-left: 30px; list-style: disc; } [data-vorlage="local-seo-agentur"] .linkkarte-liste a { font-weight: 700; } [data-vorlage="local-seo-agentur"] .linkkarte-liste .symbol { display: none; } @media (min-width: 960px) { [data-vorlage="local-seo-agentur"] .tipps-kopf { justify-content: space-between; text-align: left; flex-wrap: nowrap; } [data-vorlage="local-seo-agentur"] .tipps-kopf > div:first-child { flex: 0 1 66.66%; } [data-vorlage="local-seo-agentur"] .tipps-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* In zwei Spalten beginnt die zweite ohne Linie, wie zwei getrennte Listen. */ [data-vorlage="local-seo-agentur"] .tipps-liste > .tipp:nth-child(2) { margin-top: 0; border-top: 0; padding-top: 0; } } /* ---------- Kontaktbereich ---------- */ [data-vorlage="local-seo-agentur"] .kontaktbereich > .rahmen { --rahmen: 1600px; } [data-vorlage="local-seo-agentur"] .kontaktbereich-raster { grid-template-columns: 1fr; gap: 40px; } [data-vorlage="local-seo-agentur"] .kontaktkarte { position: static; border-radius: var(--radius); padding: 20px; color: rgb(255 255 255 / 70%); background: var(--farbe-primaer); } [data-vorlage="local-seo-agentur"] .kontaktkarte-titel { margin: 0; color: #fff; font-family: var(--schrift-akzent); font-size: 20px; font-weight: 600; line-height: 1.4; letter-spacing: 1px; } [data-vorlage="local-seo-agentur"] .kontaktkarte-text { margin: 0 0 20px; color: inherit; } [data-vorlage="local-seo-agentur"] .kontaktkarte .hakenliste { gap: 0; margin: 0 0 20px; padding-left: 30px; list-style: disc; } [data-vorlage="local-seo-agentur"] .kontaktkarte .hakenliste li { display: list-item; } [data-vorlage="local-seo-agentur"] .kontaktkarte .hakenliste .symbol { display: none; } [data-vorlage="local-seo-agentur"] .kontaktkarte .knopf { width: auto; color: #3d3d3d; background: var(--farbe-akzent); } [data-vorlage="local-seo-agentur"] .kontaktkarte .knopf:hover { border-color: #fff; color: #fff; background: transparent; } [data-vorlage="local-seo-agentur"] .kontaktkarte .mikrotext { margin: 20px 0 0; color: inherit; } [data-vorlage="local-seo-agentur"] .kontaktbereich-inhalt > h2 { max-width: 750px; } /* Kurze Linie unter der Ueberschrift. */ [data-vorlage="local-seo-agentur"] .kontaktbereich-inhalt > h2::after { display: block; width: 100px; margin-top: 20px; border-top: 1px solid var(--farbe-linie); content: ""; } [data-vorlage="local-seo-agentur"] .kontaktbereich-inhalt > .vorspann { margin: 40px 0; } [data-vorlage="local-seo-agentur"] .kontaktbereich-daten { grid-template-columns: 1fr; gap: 40px; margin: 70px 0; } [data-vorlage="local-seo-agentur"] .kontaktbereich-daten h3 { font-size: 20px; } [data-vorlage="local-seo-agentur"] .zeitenliste > div { justify-content: flex-start; gap: 10px; border: 0; padding: 0; } [data-vorlage="local-seo-agentur"] .zeitenliste > div + div { margin-top: 10px; } [data-vorlage="local-seo-agentur"] .zeitenliste dt { flex: 0 0 150px; color: var(--farbe-text); } [data-vorlage="local-seo-agentur"] .zeitenliste dd { font-weight: 400; } [data-vorlage="local-seo-agentur"] .kontaktbereich .kanal { border: 0; padding: 0; } [data-vorlage="local-seo-agentur"] .kontaktbereich .kanal + .kanal { margin-top: 10px; } [data-vorlage="local-seo-agentur"] .kontaktbereich .kanal .symbol { color: var(--farbe-titel); } [data-vorlage="local-seo-agentur"] .kontaktbereich-formular { border-top: 0; padding-top: 0; } [data-vorlage="local-seo-agentur"] .kontaktbereich-formular > h3 { margin: 40px 0 20px; font-family: var(--schrift-titel); font-size: 32.04px; line-height: 1.3; letter-spacing: 0; } @media (min-width: 960px) { [data-vorlage="local-seo-agentur"] .kontaktbereich-raster { grid-template-columns: 1fr 2fr; gap: 70px; } [data-vorlage="local-seo-agentur"] .kontaktkarte { position: sticky; top: 100px; } [data-vorlage="local-seo-agentur"] .kontaktbereich-daten { grid-template-columns: repeat(2, minmax(0, 1fr)); } [data-vorlage="local-seo-agentur"] .kontaktbereich-formular > h3 { font-size: 36px; } } @media (min-width: 1200px) { [data-vorlage="local-seo-agentur"] .kontaktkarte { padding: 40px; } } /* ---------- Formular ---------- Beschriftung klein und gesperrt, Felder mit Unterlinie statt Kasten. */ [data-vorlage="local-seo-agentur"] .kontaktformular { gap: 20px; } [data-vorlage="local-seo-agentur"] .feldpaar { gap: 20px 10px; } [data-vorlage="local-seo-agentur"] .feld { gap: 5px; color: var(--farbe-titel); font-family: var(--schrift-akzent); font-size: 11px; font-weight: 600; line-height: 1.625; letter-spacing: 1px; } [data-vorlage="local-seo-agentur"] .feld-zusatz { color: var(--farbe-leise); font-weight: 600; } [data-vorlage="local-seo-agentur"] .kontaktformular :is(input:not([type="checkbox"]), select, textarea) { border: 0; border-bottom: 1px solid var(--farbe-linie); border-radius: 0; padding: 0 10px; color: var(--farbe-text); background: #fff; font-family: var(--schrift-text); font-size: 18px; font-weight: 400; line-height: 1.625; letter-spacing: 0; transition: border-color .2s ease-in-out; } [data-vorlage="local-seo-agentur"] .kontaktformular :is(input:not([type="checkbox"]), select) { height: 40px; } [data-vorlage="local-seo-agentur"] .kontaktformular textarea { height: 73px; min-height: 73px; border: 1px solid var(--farbe-linie); padding: 6px 10px; } [data-vorlage="local-seo-agentur"] .kontaktformular :is(input, select, textarea):focus { border-color: var(--farbe-primaer); outline: 0; } [data-vorlage="local-seo-agentur"] .kontaktformular :is(input, select, textarea):focus-visible { outline: 2px solid var(--farbe-primaer); outline-offset: 2px; } [data-vorlage="local-seo-agentur"] .kontrollfeld { font-family: var(--schrift-text); font-size: 18px; font-weight: 400; letter-spacing: 0; color: var(--farbe-text); } [data-vorlage="local-seo-agentur"] .kontrollfeld input { width: 16px; height: 16px; margin-top: 7px; accent-color: var(--farbe-primaer); } [data-vorlage="local-seo-agentur"] .kontrollfeld a { font-weight: 700; } [data-vorlage="local-seo-agentur"] .feld-fehler { font-family: var(--schrift-text); font-size: 13px; letter-spacing: 0; } /* ---------- Anfahrt ---------- */ [data-vorlage="local-seo-agentur"] .anfahrt > .rahmen { --rahmen: 1600px; } [data-vorlage="local-seo-agentur"] .anfahrt-raster { grid-template-columns: 1fr; gap: 40px; } [data-vorlage="local-seo-agentur"] .anfahrt-raster h2 { max-width: 300px; font-size: 36.54px; line-height: 1.2; } [data-vorlage="local-seo-agentur"] .anfahrt-anschrift { font-size: 18px; } [data-vorlage="local-seo-agentur"] .anfahrt-anschrift .symbol { color: var(--farbe-titel); } [data-vorlage="local-seo-agentur"] .anfahrt-raster .knopf { color: #fff; background: var(--farbe-primaer-dunkel); } [data-vorlage="local-seo-agentur"] .anfahrt-raster .knopf:hover { border-color: var(--farbe-primaer-dunkel); color: var(--farbe-primaer-dunkel); background: transparent; } [data-vorlage="local-seo-agentur"] .anfahrt-bild { margin-top: 40px; } [data-vorlage="local-seo-agentur"] .anfahrt-bild img { height: 350px; border-radius: 8px; object-fit: cover; } /* Anfahrt und Fragen stehen auf derselben Flaeche; dazwischen nur eine Linie. */ [data-vorlage="local-seo-agentur"] .anfahrt:has(+ #faq) { padding-bottom: 0; } [data-vorlage="local-seo-agentur"] .anfahrt + #faq { padding-top: 40px; } [data-vorlage="local-seo-agentur"] .anfahrt + #faq > .rahmen { --rahmen: 1600px; max-width: none; border-top: 1px solid var(--farbe-linie); padding-top: 40px; } [data-vorlage="local-seo-agentur"] #faq .abschnittskopf { margin-bottom: 20px; } [data-vorlage="local-seo-agentur"] .faq-telefon { margin: 0 0 40px; } [data-vorlage="local-seo-agentur"] .faq-telefon a { font-weight: 700; } @media (min-width: 960px) { [data-vorlage="local-seo-agentur"] .anfahrt-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } [data-vorlage="local-seo-agentur"] .anfahrt-raster h2 { font-size: 42px; } [data-vorlage="local-seo-agentur"] .anfahrt-bild img { height: 450px; border-radius: 12px; } } /* ---------- Fussbereich ---------- Hell: links und rechts das Signet, in der Mitte die rechtlichen Verweise mit feinen Trennstrichen, darunter klein und leise die Angaben. */ .vorlagenfuss { padding: 40px 0; color: var(--farbe-text); background: #fff; } .vorlagenfuss-zeile { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: center; justify-items: center; } .vorlagenfuss-signet { display: inline-block; } .vorlagenfuss-signet img { display: block; width: 100px; height: 100px; } .vorlagenfuss-seite--rechts { display: none; } .vorlagenfuss-rechtliches { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 0; font-family: var(--schrift-akzent); font-size: 11px; font-weight: 600; letter-spacing: 1px; } .vorlagenfuss-rechtliches a { color: var(--farbe-text); text-decoration: none; transition: color .1s ease-in-out; } .vorlagenfuss-rechtliches a:hover { color: var(--farbe-titel); text-decoration: none; } .vorlagenfuss-rechtliches a + a { margin-left: 20px; border-left: 1px solid var(--farbe-linie); padding-left: 20px; } .vorlagenfuss-angaben { margin-top: 10px; color: var(--farbe-leise); font-size: 13px; line-height: 1.5; text-align: center; } .vorlagenfuss-angaben p { margin: 0 0 20px; } .vorlagenfuss-angaben address span { display: block; } .vorlagenfuss-angaben a { color: inherit; } .vorlagenfuss-siegel { margin-top: 20px; text-align: center; } @media (min-width: 640px) { .vorlagenfuss-zeile { grid-template-columns: auto 1fr auto; } .vorlagenfuss-seite--rechts { display: block; } } @media (min-width: 960px) { .vorlagenfuss { padding: 70px 0; } } /* ---------- Einblenden beim Hineinscrollen ---------- vorlage.js setzt data-vl-einblenden (die Art) und spaeter data-vl-sichtbar. Ohne Skript und mit "Bewegung reduzieren" greift nichts davon. */ [data-vl-einblenden]:not([data-vl-sichtbar]) { visibility: hidden; } [data-vl-einblenden][data-vl-sichtbar] { animation: .5s ease-out both; animation-delay: calc(var(--vl-stufe, 0) * 1ms); } [data-vl-einblenden="hoch"][data-vl-sichtbar] { animation-name: vl-blende, vl-hoch; } [data-vl-einblenden="herab"][data-vl-sichtbar] { animation-name: vl-blende, vl-herab; } [data-vl-einblenden="gross"][data-vl-sichtbar] { animation-name: vl-blende, vl-gross; } [data-vl-einblenden="klein"][data-vl-sichtbar] { animation-name: vl-blende, vl-klein; } [data-vl-einblenden="links"][data-vl-sichtbar] { animation-name: vl-blende, vl-links; } [data-vl-einblenden="blende"][data-vl-sichtbar] { animation-name: vl-blende; animation-duration: .8s; animation-timing-function: linear; } @keyframes vl-blende { from { opacity: 0; } to { opacity: 1; } } @keyframes vl-hoch { from { transform: translateY(50px); } to { transform: none; } } @keyframes vl-herab { from { transform: translateY(-50px); } to { transform: none; } } @keyframes vl-gross { from { transform: scale(.9); } to { transform: none; } } @keyframes vl-klein { from { transform: scale(1.1); } to { transform: none; } } @keyframes vl-links { from { transform: translateX(-10px); } to { transform: none; } } /* Die Schritte des Ablaufs blendet schon gestaltung.css ein; hier nur weicher. */ [data-vorlage="local-seo-agentur"] [data-einblenden="wartet"] .ablaufkarte { transform: none; transition: opacity .8s linear; transition-delay: calc(var(--i, 0) * 200ms); } /* Der Startbereich blendet beim Laden per CSS ein - gestaffelt von unten, wie im Muster. Ohne Skript, damit beim Laden nichts erst da ist und dann verschwindet. */ @media (prefers-reduced-motion: no-preference) { [data-vorlage="local-seo-agentur"] .herofoto-inhalt > * { animation: vl-blende .5s ease-out both, vl-hoch .5s ease-out both; } [data-vorlage="local-seo-agentur"] .herofoto-inhalt > :nth-child(2) { animation-delay: .1s; } [data-vorlage="local-seo-agentur"] .herofoto-inhalt > :nth-child(3) { animation-delay: .2s; } [data-vorlage="local-seo-agentur"] .herofoto-inhalt > :nth-child(4) { animation-delay: .3s; } /* Aufklappen mit weichem Uebergang, wo der Browser es kann. */ @supports (interpolate-size: allow-keywords) { [data-vorlage="local-seo-agentur"] :is(.tipp, .faq-eintrag) { interpolate-size: allow-keywords; } [data-vorlage="local-seo-agentur"] :is(.tipp, .faq-eintrag)::details-content { block-size: 0; overflow: clip; transition: block-size .2s ease, content-visibility .2s allow-discrete; } [data-vorlage="local-seo-agentur"] :is(.tipp, .faq-eintrag)[open]::details-content { block-size: auto; } } } @media (prefers-reduced-motion: reduce) { .vorlagenkopf-leiste[data-fest] { animation: none; } } @media print { [data-vl-einblenden] { visibility: visible !important; animation: none !important; } .vorlagenkopf { position: static; } }