/*
Theme Name: Nippon Sushi & Thai
Theme URI: https://nippon-sushi.de
Description: Child-Theme für Divi — Nippon Sushi & Thai, Lüneburg. Dunkle Fassung nach Entwurf.
Author: Green Dragon – Thao Duong-Cordsen
Author URI: https://greendragon.xyz
Template: Divi
Version: 1.0.0
License: GNU General Public License v2
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nippon-de
*/

/*
 * Aufbau
 * ------
 * Alle Farben und Maße stehen als Variablen im :root-Block. Wer das
 * Erscheinungsbild ändert, ändert dort — nicht in den einzelnen Regeln.
 *
 * Eigene Klassen tragen das Präfix „ns-". Divi-eigene Klassen werden nur
 * dort überschrieben, wo es sich nicht vermeiden lässt; diese Stellen sind
 * einzeln begründet.
 */

:root {
    /* Flächen */
    --ns-grund:   #0d0f0d;
    --ns-flaeche: #151815;
    --ns-karte:   #1b1f1b;
    --ns-linie:   #2b302b;

    /* Marke */
    --ns-gruen:      #7cc242;
    --ns-gruen-tief: #4d8b1f;
    --ns-gold:       #e8b44a;
    --ns-gold-tief:  #c8912a;
    --ns-rot:        #d94a3d;
    /* Fuer Schrift eine Spur heller: #d94a3d kommt auf dem dunklen Grund nur
       auf 4,26:1, damit faellt Text unter die Lesbarkeitsgrenze. */
    --ns-rot-text:   #e05a4c;
    --ns-orange:     #e07b39;

    /* Schrift */
    --ns-text:  #e6e9e4;
    --ns-grau:  #a3aca0;
    --ns-weiss: #ffffff;

    --ns-radius: 10px;
    --ns-schrift:       "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    --ns-schrift-titel: "Lora", Georgia, "Times New Roman", serif;

    /* Höhe des fixierten Kopfbereichs — für Sprungmarken */
    --ns-kopf-hoehe: 0px;
}

@media (min-width: 981px) {
    :root { --ns-kopf-hoehe: 64px; }
}

/* ---------- Grundlagen ---------- */

body,
body.et-db #et-boc .et-l {
    background-color: var(--ns-grund);
    color: var(--ns-text);
    font-family: var(--ns-schrift);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
body.et-db #et-boc .et-l h1,
body.et-db #et-boc .et-l h2,
body.et-db #et-boc .et-l h3,
body.et-db #et-boc .et-l h4 {
    font-family: var(--ns-schrift-titel);
    color: var(--ns-weiss);
}

a { color: var(--ns-gruen); }

/* Divi färbt Abschnitte hell; die Grundfläche kommt aus der Variablen. */
#page-container,
#main-content,
.et_pb_section {
    background-color: transparent !important;
}

#main-content { background-color: var(--ns-grund) !important; }

.ns-abschnitt          { background-color: var(--ns-grund) !important; }
.ns-abschnitt--flaeche { background-color: var(--ns-flaeche) !important; }

/* ---------- Wiederkehrende Bausteine ---------- */

.ns-signet {
    display: block;
    margin-bottom: 2px;
    color: var(--ns-rot-text);
    font-size: 0.95rem;
    letter-spacing: 0.1em;
}

.ns-titel {
    margin: 0 0 6px;
    font-size: clamp(1.55rem, 3.4vw, 2.25rem);
    line-height: 1.2;
}

.ns-untertitel {
    margin: 0 0 26px;
    color: var(--ns-grau);
    font-size: 0.93rem;
}

.ns-mitte { text-align: center; }

/* ---------- Hinweisleiste ganz oben ---------- */

.ns-leiste {
    padding: 9px 16px;
    background: linear-gradient(90deg, var(--ns-gruen-tief), var(--ns-gruen));
    color: #0c1a06;
    font-size: 0.86rem;
    font-weight: 700;
    text-align: center;
}

.ns-leiste a { color: #0c1a06; text-decoration: underline; }

/* ---------- Kontaktzeile im Kopf ---------- */

.ns-kopfzeile {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 28px;
}

.ns-kopfzeile__punkt {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ns-text);
    font-size: 0.92rem;
    white-space: nowrap;
}

.ns-kopfzeile__punkt a {
    color: var(--ns-gruen);
    font-weight: 700;
    text-decoration: none;
}

/* ---------- Hero ---------- */

.ns-hero h1 {
    margin: 0 0 14px;
    font-size: clamp(2rem, 5.4vw, 3.3rem);
    line-height: 1.08;
}

.ns-hero h1 em {
    display: block;
    font-style: normal;
    color: var(--ns-gruen);
}

.ns-hero__text {
    margin: 0 0 26px;
    max-width: 30rem;
    line-height: 1.6;
}

.ns-knoepfe {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 21rem;
}

.ns-knopf {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    border: 1px solid transparent;
    border-radius: var(--ns-radius);
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1.25;
    text-decoration: none;
    transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.ns-knopf:hover { transform: translateY(-2px); }

.ns-knopf__sym   { flex: 0 0 auto; font-size: 1.1rem; line-height: 1; }
.ns-knopf__klein { display: block; font-size: 0.78rem; font-weight: 600; opacity: 0.85; }

.ns-knopf--gold  { background: linear-gradient(90deg, var(--ns-gold), var(--ns-gold-tief)); color: #241a05 !important; }
.ns-knopf--gruen { background: linear-gradient(90deg, var(--ns-gruen-tief), var(--ns-gruen)); color: #0c1a06 !important; }

.ns-knopf--orange {
    border-color: var(--ns-orange);
    color: var(--ns-orange) !important;
    background: rgba(224, 123, 57, 0.08);
}

.ns-knopf--rot {
    border-color: var(--ns-rot);
    color: var(--ns-rot-text) !important;
    background: rgba(217, 74, 61, 0.08);
}

/* ---------- Merkmalsleiste ---------- */

.ns-merkmale .et_pb_blurb_container h4,
.ns-merkmale .et_pb_module_header {
    color: var(--ns-weiss) !important;
    font-size: 0.98rem !important;
    font-weight: 700 !important;
}

.ns-merkmale .et_pb_blurb_description {
    color: var(--ns-grau) !important;
    font-size: 0.85rem !important;
    line-height: 1.5 !important;
}

@media (min-width: 981px) {
    .ns-merkmale .et_pb_column:not(:last-child) {
        border-right: 1px solid var(--ns-linie);
    }
}

/* ---------- Empfehlungskarten ---------- */

.ns-karten {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
}

.ns-karte {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--ns-linie);
    border-radius: var(--ns-radius);
    background: var(--ns-karte);
    overflow: hidden;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.ns-karte:hover { transform: translateY(-3px); border-color: var(--ns-gruen-tief); }

.ns-karte__bild {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: var(--ns-flaeche);
}

.ns-karte__wort  { padding: 11px 12px 14px; }
.ns-karte__titel { margin: 0 0 4px; color: var(--ns-weiss); font-size: 0.9rem; font-weight: 700; line-height: 1.3; }
.ns-karte__text  { margin: 0; color: var(--ns-grau); font-size: 0.78rem; line-height: 1.45; }

@media (max-width: 1100px) { .ns-karten { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px)  { .ns-karten { grid-template-columns: repeat(2, 1fr); gap: 10px; } }

/* ---------- Preislisten ---------- */

.ns-liste { margin: 0; padding: 0; list-style: none; }

.ns-liste li {
    padding: 9px 0;
    border-bottom: 1px solid var(--ns-linie);
}

.ns-liste li:last-child { border-bottom: 0; }

.ns-zeile { display: flex; align-items: baseline; gap: 8px; }

.ns-zeile__name     { flex: 0 1 auto; color: var(--ns-weiss); font-weight: 700; font-size: 1rem; }
.ns-zeile__fuehrung { flex: 1 1 auto; min-width: 16px; border-bottom: 1px dotted var(--ns-linie); transform: translateY(-4px); }
.ns-zeile__preis    { flex: 0 0 auto; color: var(--ns-gold); font-weight: 700; white-space: nowrap; }
.ns-zeile__text     { display: block; margin-top: 3px; color: var(--ns-grau); font-size: 0.84rem; line-height: 1.5; }

.ns-teile {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 20px;
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
    color: var(--ns-grau);
    font-size: 0.82rem;
}

.ns-teile li::before { content: "\2022  "; color: var(--ns-gruen); }

@media (max-width: 620px) { .ns-teile { grid-template-columns: 1fr; } }

/* ---------- Häufige Fragen ---------- */

.ns-fragen .et_pb_toggle {
    margin-bottom: 10px;
    border: 1px solid var(--ns-linie) !important;
    border-radius: var(--ns-radius) !important;
    background: var(--ns-karte) !important;
}

.ns-fragen .et_pb_toggle_title   { color: var(--ns-text) !important; font-size: 0.92rem !important; font-weight: 600 !important; }
.ns-fragen .et_pb_toggle_content { color: var(--ns-grau) !important; font-size: 0.88rem !important; }

/* ---------- Kontakt ---------- */

.ns-kontakt h3 {
    margin: 0 0 14px;
    color: var(--ns-gold);
    font-size: 1.15rem;
}

.ns-kontakt__punkt {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
    font-size: 0.92rem;
    line-height: 1.5;
}

.ns-kontakt__punkt b { color: var(--ns-gold); }

.ns-zeiten dt { margin-top: 8px; color: var(--ns-gold); font-size: 0.84rem; font-weight: 700; }
.ns-zeiten dd { margin: 0; font-size: 0.9rem; }

/* Liefertabelle */
.ns-tabelle { width: 100%; border-collapse: collapse; font-size: 0.8rem; }

/* Divi faerbt Tabellenkoepfe ueber .entry-content thead th grau (#555) und
   gewinnt mit der hoeheren Spezifitaet — auf dem Gruen waren das 1,79:1.
   Mit dem Grundton der Seite sind es 4,60:1. */
.entry-content .ns-tabelle th,
.ns-tabelle th {
    padding: 6px 8px;
    background: var(--ns-gruen-tief);
    color: var(--ns-grund);
    text-align: left;
    font-weight: 700;
}

.ns-tabelle td { padding: 5px 8px; border-bottom: 1px solid var(--ns-linie); }

.ns-tabelle td:nth-child(3), .ns-tabelle th:nth-child(3),
.ns-tabelle td:nth-child(4), .ns-tabelle th:nth-child(4) {
    text-align: right;
    white-space: nowrap;
}

/* Auf schmalen Geräten wird jede Zeile zur Karte — seitwärts scrollen ist
   auf dem Handy die schlechtere Lösung. */
@media (max-width: 720px) {
    .ns-tabelle, .ns-tabelle tbody, .ns-tabelle tr, .ns-tabelle td { display: block; width: 100%; }
    /* Ganz ausblenden statt nur unsichtbar machen: Die Zellen tragen ihre
       Beschriftung ueber data-label, der Kopf ist damit entbehrlich. Nur
       versteckt behaelt er seine Breite und sprengt die Seite. */
    .ns-tabelle thead { display: none; }
    .ns-tabelle tr { margin-bottom: 8px; border: 1px solid var(--ns-linie); border-radius: 8px; overflow: hidden; }
    .ns-tabelle td { display: flex; justify-content: space-between; gap: 12px; text-align: right !important; }
    .ns-tabelle td::before { content: attr(data-label); color: var(--ns-grau); font-weight: 600; text-align: left; }
    .ns-tabelle td:first-child { background: var(--ns-flaeche); font-weight: 700; }
    .ns-tabelle td:first-child::before { display: none; }
}

/* ---------- Fußbereich ---------- */

.ns-fuss__worte {
    margin: 14px auto 0;
    max-width: 54rem;
    color: var(--ns-grau);
    font-size: 0.8rem;
    line-height: 1.7;
    text-align: center;
}

/* ---------- Barrierefreiheit ---------- */

/* Das hidden-Attribut wirkt nur über display:none; jede eigene
   display-Angabe würde es sonst aushebeln. */
[hidden] { display: none !important; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--ns-gruen) !important;
    outline-offset: 3px !important;
}

.ns-nur-vorlesen {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
    }

    .ns-knopf:hover, .ns-karte:hover { transform: none !important; }
}

/* ---------- Kleine Bildschirme ---------- */

@media (max-width: 980px) {
    .ns-knoepfe   { max-width: none; }
    .ns-kopfzeile { justify-content: center; }
}


/* ---------- Tippziele ---------- */

/*
 * Divi setzt fuer Schaltflaechen eine eigene, knappe Polsterung. Fuer die
 * Bedienung mit dem Daumen sind 44 Pixel Hoehe die uebliche Untergrenze —
 * darunter trifft man daneben.
 */
.et_pb_button.ns-knopf,
.ns-knopf {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 12px 20px !important;
    width: 100%;
    text-align: center;
}

@media (min-width: 981px) {
    .et_pb_button.ns-knopf,
    .ns-knopf {
        width: auto;
        max-width: 22rem;
    }
}

/* Telefonnummern sind die wichtigsten Ziele der Seite und brauchen Flaeche. */
.ns-leiste a,
.ns-kopfzeile__punkt a,
.ns-kontakt__punkt a {
    display: inline-block;
    min-height: 44px;
    padding: 11px 6px;
    line-height: 22px;
}

@media (min-width: 981px) {
    .ns-leiste a { min-height: 0; padding: 0; line-height: inherit; }
}

/* Fragen im Akkordeon ebenfalls bequem treffbar machen. */
.ns-fragen .et_pb_toggle_title {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}


/*
 * Telefonverweise sicher auf Tippgroesse bringen.
 *
 * Divi setzt fuer Verweise eigene Zeilenhoehen; ohne inline-flex und
 * min-height bleibt der anklickbare Bereich so hoch wie die Schrift.
 */
.ns-kopfzeile__punkt a[href^="tel:"],
.ns-kontakt__punkt a[href^="tel:"],
.ns-leiste a[href^="tel:"] {
    display: inline-flex !important;
    align-items: center;
    min-height: 44px;
    padding: 0 8px;
}

/* Social-Symbole ausblenden, falls sie ueber ein Modul doch erscheinen. */
.et_pb_social_media_follow,
#et-info .et-social-icons,
#main-footer .et-social-icons {
    display: none !important;
}


/* ---------- Nachtraege aus der Sichtpruefung ---------- */

/*
 * Divi setzt fuer Listen in Textmodulen eigene Aufzaehlungszeichen. In der
 * Preisliste stoeren sie: dort traegt jede Zeile bereits Name und Preis.
 */
.ns-liste,
.ns-liste li,
.ns-teile,
.ns-teile li {
    list-style: none !important;
}

.ns-liste li::marker,
.ns-teile li::marker {
    content: none;
}

.ns-liste li::before {
    display: none !important;
}

/* Kopfbereich dunkel, damit er nicht als weisser Balken ueber dem
   Entwurf steht. Divi setzt die Farbe mit hoher Spezifitaet. */
#main-header,
#top-header,
.et-fixed-header,
#et_mobile_nav_menu .mobile_nav,
.et_mobile_menu {
    background-color: #0d0f0d !important;
    box-shadow: 0 1px 0 var(--ns-linie) !important;
}

#top-menu li a,
.et_mobile_menu li a,
.mobile_menu_bar:before {
    color: var(--ns-text) !important;
}

#top-menu li.current-menu-item > a {
    color: var(--ns-gruen) !important;
}

/* Divi setzt jedes Waypoint-Element auf Deckkraft 0 und blendet es erst beim
   Scrollen ein. Fuer animation="off" fehlt die Gegenregel: Das Skript haengt
   zwar .et-animated an, aber keine Regel setzt die Deckkraft je zurueck — die
   Bilder blieben also dauerhaft unsichtbar. Deshalb hier ohne Zustandsprüfung. */
.et-waypoint.et_pb_animation_off {
    opacity: 1 !important;
}

/* Kartenbild randlos ueber die volle Kartenbreite, festes Seitenverhaeltnis:
   So bleiben die Karten einer Reihe gleich hoch, egal wie hoch das Foto ist,
   das spaeter den Platzhalter ersetzt. */
/* Der Kindselektor ist noetig: Divi setzt den Abstand ueber
   .et_block_module > .et_pb_blurb_content .et_pb_main_blurb_image und gewinnt
   sonst mit der hoeheren Spezifitaet. */
.ns-karte-modul > .et_pb_blurb_content .et_pb_main_blurb_image {
    width: 100%;
    margin-bottom: 16px;
}

.ns-karte-modul .et_pb_image_wrap {
    display: block;
    width: 100%;
    line-height: 0;
}

.ns-karte-modul .et_pb_image_wrap img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 9px 9px 0 0;
}

/* Die seitliche Luft sitzt am Text, nicht am Modul — sonst haette das Bild
   einen Rand und die abgerundete Kartenecke einen sichtbaren Knick. */
.ns-karte-modul .et_pb_blurb_container {
    padding: 0 16px;
}

/* Die sechs Empfehlungskarten liegen in einer einzigen Divi-Spalte und werden
   hier zum Raster: drei nebeneinander, ab Tablet zwei, auf dem Handy eine.
   Mit Divi-Spalten gebaut braeche die Reihe zu 2+1 um und liesse je Reihe
   eine Karte allein stehen. */
.ns-karten-abschnitt .et_pb_column {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: stretch;
}

/* Divi gibt jedem Modul einen Aussenabstand nach unten — im Raster erzeugt
   das eine schiefe letzte Zeile. Den Abstand macht hier gap. */
.ns-karten-abschnitt .et_pb_blurb {
    margin-bottom: 0 !important;
    height: 100%;
}

@media (max-width: 980px) {
    .ns-karten-abschnitt .et_pb_column {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }
}

/* Eine Karte je Zeile, sobald zwei nebeneinander schmaler als rund 170 px
   waeren — darunter ist die Bildbeschriftung nicht mehr zu lesen. */
@media (max-width: 560px) {
    .ns-karten-abschnitt .et_pb_column {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* Divi setzt den Vermerk in der Fusszeile auf #666; auf dem dunklen Grund
   sind das 3,12:1. Mit dem Grauton der Seite werden es 4,71:1. */
#footer-info,
#footer-info a {
    color: var(--ns-grau) !important;
}