/* =========================================================
   Formular-Layout
   ========================================================= */

/* Hier gestalte ich den äußeren Wrapper des gesamten Bewertungsformulars.
   Ich begrenze damit die maximale Breite und zentriere das Formular auf der Seite. */
.lq-review-wrap{
  max-width:760px;
  margin:0 auto;
}

/* Hier gestalte ich die eigentliche Formular-Box im Card-Design.
   Ich verwende einen weißen Hintergrund, abgerundete Ecken
   und einen leichten Schatten für ein modernes Erscheinungsbild. */
.lq-review-box{
  background:#fff;
  border:1px solid #eee;
  border-radius:18px;
  padding:26px 26px;
  box-shadow:0 10px 30px rgba(0,0,0,.06);
}


/* =========================================================
   Formularfelder
   ========================================================= */

/* Hier definiere ich den Abstand zwischen den einzelnen Formularfeldern. */
.lq-field{
  margin:18px 0;
}

/* Hier gestalte ich die Beschriftungen der Formularfelder.
   Ich stelle sie als Blockelement dar und definiere Schriftgröße,
   Farbe und Abstand zum Eingabefeld. */
.lq-field label{
  display:block;
  font-weight:400;
  font-size:16px;
  margin:0 0 7px;
  color:#111;
  letter-spacing:-0.01em;
}

/* Hier gestalte ich das Sternchen für Pflichtfelder.
   Ich hebe es farblich hervor, damit Pflichtangaben klar erkennbar sind. */
.lq-req{
  color:#871715;
  font-weight:700;
  margin-left:4px;
}


/* =========================================================
   Input-Felder und Textarea
   ========================================================= */

/* Hier definiere ich das Grunddesign für alle Eingabefelder und Textareas.
   Ich sorge damit für ein einheitliches Erscheinungsbild im gesamten Formular. */
.lq-field input,
.lq-field textarea{
  width:100%;
  box-sizing:border-box;
  padding:14px 14px;
  border:1px solid #e6e6e6;
  border-radius:14px;
  font-size:15px;
  line-height:1.35;
  font-weight:400;
  color:#111;
  outline:none;
  background:#fff;
}

/* Hier definiere ich zusätzliche Eigenschaften für das Textfeld der Bewertung.
   Ich setze eine Mindesthöhe und erlaube nur die vertikale Größenänderung. */
.lq-field textarea{
  min-height:120px;
  resize:vertical;
}

/* Hier gestalte ich den Fokus-Zustand der Eingabefelder.
   Dadurch wird für Nutzerinnen und Nutzer sichtbar, welches Feld gerade aktiv ist. */
.lq-field input:focus,
.lq-field textarea:focus{
  border-color:#bfbfbf;
  box-shadow:0 0 0 4px rgba(0,0,0,.04);
}


/* =========================================================
   Fehlerzustand bei Eingabefeldern
   ========================================================= */

/* Hier definiere ich den visuellen Fehlerzustand für ungültige Eingabefelder.
   Ich verwende dafür einen roten Rahmen und eine rote Hervorhebung. */
.lq-input-error{
  border-color:rgba(220,38,38,.45) !important;
  box-shadow:0 0 0 4px rgba(220,38,38,.10) !important;
}


/* =========================================================
   Responsive Reihenlayout
   ========================================================= */

/* Hier verwende ich Flexbox, um mehrere Formularfelder nebeneinander darstellen zu können. */
.lq-row{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
}

/* Hier definiere ich die Eigenschaften der einzelnen Felder innerhalb einer Reihe.
   Dadurch können sich die Felder flexibel an die verfügbare Breite anpassen. */
.lq-row .lq-field{
  flex:1;
  min-width:240px;
  margin:12px 0;
}


/* =========================================================
   Hinweistexte
   ========================================================= */

/* Hier gestalte ich kleine Hinweistexte unter den Formularfeldern.
   Diese dienen zur zusätzlichen Erklärung einzelner Eingaben. */
.lq-note{
  font-size:13px;
  line-height:1.45;
  color:rgba(17,17,17,.72);
  margin-top:8px;
  font-weight:400;
}

/* Hier definiere ich eine zentrierte Variante der Hinweistexte. */
.lq-note-center{
  text-align:center;
  margin-top:14px;
}


/* =========================================================
   Sternebewertung (Frontend-Formular)
   ========================================================= */

/* Hier gestalte ich den Container für die Sternebewertung.
   Ich ordne die Sterne nebeneinander an und richte sie sauber aus. */
.lq-stars{
  display:flex;
  gap:10px;
  align-items:center;
  margin-top:6px;
}

/* Hier definiere ich den Fehlerzustand des Sternefeldes.
   So kann ich auch die Sternebewertung visuell als ungültig markieren. */
.lq-stars.is-error{
  padding:8px 10px;
  border:1px solid rgba(220,38,38,.45);
  border-radius:12px;
  box-shadow:0 0 0 4px rgba(220,38,38,.10);
}

/* Hier gestalte ich den eigentlichen Stern-Button.
   Ich entferne Standard-Button-Stile und mache ihn klickbar. */
.lq-star-btn{
  background:transparent;
  border:0;
  padding:0;
  cursor:pointer;
  line-height:1;
}

/* Hier definiere ich die Darstellung der Sterne.
   Standardmäßig sind sie grau eingefärbt und leicht animiert. */
.lq-star{
  font-size:26px;
  display:inline-block;
  color:#bfbfbf;
  text-shadow:0 1px 0 rgba(0,0,0,.06);
  transition:transform .08s ease, color .12s ease;
}

/* Hier gestalte ich den Hover-Effekt für die Sterne,
   damit die Interaktion im Formular direkter spürbar wird. */
.lq-star-btn:hover .lq-star{
  transform:translateY(-1px);
}

/* Hier definiere ich den aktiven Zustand eines Sterns.
   Ausgewählte Sterne werden in der Akzentfarbe dargestellt. */
.lq-star.is-on{
  color:#871715;
}

/* Hier gestalte ich den kleinen Hinweistext unter der Sternebewertung. */
.lq-stars-hint{
  font-size:14px;
  color:#666;
  margin-top:10px;
}

/* Hier definiere ich die Darstellung von Fehlermeldungen im Formular. */
.lq-field-error{
  margin-top:8px;
  font-size:14px;
  color:#991b1b;
  font-weight:600;
}


/* =========================================================
   Submit Button
   ========================================================= */

/* Hier gestalte ich den Hauptbutton zum Absenden der Bewertung.
   Ich verwende die Akzentfarbe der Website und ein deutlich sichtbares Button-Design. */
.lq-btn{
  width:100%;
  margin-top:18px;
  padding:14px 18px;
  border:0;
  border-radius:16px;
  cursor:pointer;
  background:#871715;
  color:#fff;
  font-weight:750;
  font-size:16px;
  box-shadow:0 10px 24px rgba(122,15,18,.25);
}

/* Hier definiere ich den Hover-Zustand des Buttons.
   Der Button wird dabei leicht aufgehellt. */
.lq-btn:hover{
  filter:brightness(1.04);
}

/* Hier definiere ich den aktiven Klick-Zustand des Buttons.
   Beim Klicken verschiebt er sich leicht nach unten. */
.lq-btn:active{
  transform:translateY(1px);
}


/* =========================================================
   Feedback-Meldungen (Erfolg / Fehler)
   ========================================================= */

/* Hier definiere ich das Grundlayout für Rückmeldungen unter dem Formular,
   beispielsweise für Erfolgs- oder Fehlermeldungen. */
.lq-msg{
  margin:14px 0;
  padding:14px 16px;
  border-radius:16px;
  font-weight:600;
}

/* Hier gestalte ich die Erfolgsnachricht in Grün. */
.lq-msg.ok{
  background:#ecfdf3;
  border:1px solid #b7f0b7;
  color:#11643a;
}

/* Hier gestalte ich die Fehlermeldung in Rot. */
.lq-msg.err{
  background:#fff1f2;
  border:1px solid #fecdd3;
  color:#9f1239;
}


/* =========================================================
   DSGVO Checkbox
   ========================================================= */

/* Hier gestalte ich den Container für Checkbox und Text.
   Ich richte beides sauber nebeneinander aus. */
.lq-check{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-top:10px;
}

/* Hier gestalte ich die Checkbox im eigenen Design,
   damit sie besser zum restlichen Formular passt. */
.lq-check input[type="checkbox"]{
  appearance:none;
  -webkit-appearance:none;
  width:14px;
  height:14px;
  flex:0 0 14px;
  border:1.2px solid #cfcfcf;
  border-radius:3px;
  background:#fff;
  cursor:pointer;
  position:relative;
  margin:2px 0 0 0;
  padding:0;
  line-height:0;
  transform:scale(0.92);
  transform-origin:left top;
}

/* Hier definiere ich den aktivierten Zustand der Checkbox.
   Im ausgewählten Zustand färbe ich sie in der Akzentfarbe ein. */
.lq-check input[type="checkbox"]:checked{
  background:#871715;
  border-color:#871715;
}

/* Hier füge ich das Häkchen innerhalb der aktivierten Checkbox ein. */
.lq-check input[type="checkbox"]:checked::after{
  content:'';
  position:absolute;
  left:50%;
  top:50%;
  width:3px;
  height:7px;
  border:solid #fff;
  border-width:0 2px 2px 0;
  transform:translate(-50%,-58%) rotate(45deg);
}

/* Hier gestalte ich den Fokus-Zustand der Checkbox. */
.lq-check input[type="checkbox"]:focus{
  outline:none;
  box-shadow:0 0 0 3px rgba(135,23,21,.12);
}

/* Hier gestalte ich den Text neben der Checkbox. */
.lq-check label{
  display:inline;
  font-size:13px;
  line-height:1.35;
  font-weight:600;
  color:#111;
  margin:0;
}

/* Hier gestalte ich den Link innerhalb des DSGVO-Textes. */
.lq-check a{
  color:#871715;
  text-decoration:underline;
}

/* Hier definiere ich den Hover-Zustand des Links. */
.lq-check a:hover{
  text-decoration:none;
}


/* =========================================================
   Bewertungs-Ausgabe (Review Liste)
   ========================================================= */

/* Hier gestalte ich den Container der gesamten Bewertungsliste.
   Ich begrenze die Breite und zentriere die Ausgabe auf der Seite. */
.lq-review-list{
  max-width:780px;
  margin:0 auto;
}


/* =========================================================
   Review Slider
   ========================================================= */

/* Hier gestalte ich den äußeren Container des Sliders.
   Ich definiere die maximale Breite und schaffe seitlich Platz für die Pfeile. */
.lq-review-slider{
  position:relative;
  max-width:780px;
  margin:0 auto;
  padding:0 86px;
}

/* Hier definiere ich den sichtbaren Bereich des Sliders.
   Alles außerhalb dieses Bereichs wird ausgeblendet. */
.lq-review-viewport{
  overflow:hidden;
  width:100%;
  padding:16px 0 22px 0;
}

/* Hier gestalte ich den Track, auf dem alle Slides nebeneinander liegen. */
.lq-review-track{
  display:flex;
  align-items:stretch;
}

/* Hier definiere ich die Eigenschaften einer einzelnen Slide.
   Am Desktop werden standardmäßig zwei Slides nebeneinander dargestellt. */
.lq-review-slide{
  flex:0 0 50%;
  box-sizing:border-box;
  padding:8px 12px 16px;
  display:flex;
}

/* Hier gestalte ich die Navigationspfeile des Sliders.
   Ich positioniere sie absolut und gestalte sie als runde Buttons. */
.lq-slider-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:48px;
  height:48px;
  border:none;
  border-radius:999px;
  background:#871715;
  color:#fff;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:0;
  padding:0;
  box-shadow:0 12px 24px rgba(122,15,18,.24);
  transition:filter .12s ease, box-shadow .12s ease;
  z-index:5;
  font-size:0;
}

/* Hier positioniere ich den linken Navigationspfeil. */
.lq-slider-prev{
  left:0;
}

/* Hier positioniere ich den rechten Navigationspfeil. */
.lq-slider-next{
  right:0;
}

/* Hier forme ich das eigentliche Pfeilsymbol mit CSS-Rahmen. */
.lq-slider-arrow::before{
  content:'';
  display:block;
  width:10px;
  height:10px;
  border-top:4px solid #fff;
  border-right:4px solid #fff;
  box-sizing:border-box;
  position:relative;
}

/* Hier drehe ich das Symbol zum linken Pfeil. */
.lq-slider-prev::before{
  transform:rotate(-135deg);
  left:1px;
}

/* Hier drehe ich das Symbol zum rechten Pfeil. */
.lq-slider-next::before{
  transform:rotate(45deg);
  left:-1px;
}

/* Hier gestalte ich den Hover-Zustand der Pfeilbuttons. */
.lq-slider-arrow:hover{
  filter:brightness(1.05);
  box-shadow:0 14px 28px rgba(122,15,18,.28);
  transform:translateY(-50%);
}

/* Hier definiere ich den aktiven Zustand der Pfeile.
   Die vertikale Position soll dabei unverändert bleiben. */
.lq-slider-arrow:active{
  transform:translateY(-50%);
}

/* Hier entferne ich die Standard-Fokuslinie der Pfeilbuttons. */
.lq-slider-arrow:focus{
  outline:none;
}

/* Hier gestalte ich den sichtbaren Fokus-Zustand für Tastaturnavigation. */
.lq-slider-arrow:focus-visible{
  outline:2px solid rgba(135,23,21,.30);
  outline-offset:3px;
}

/* =========================================================
   Review Karte – Desktop / Grundlayout
   ========================================================= */

/* Hier gestalte ich die einzelne Bewertungskarte im Desktop-Grundlayout.
   Ich verwende ein Grid, damit Name, Text, Link und Datum sauber angeordnet bleiben. */
.lq-review-item{
  border:1px solid #e6e6e6;
  border-radius:18px;
  padding:18px 20px 12px;
  min-height:198px;
  margin:0;
  background:#fff;
  width:100%;
  box-shadow:0 14px 30px rgba(0,0,0,.08);

  display:grid;
  grid-template-rows:
    52px
    52px
    18px
    16px;
  row-gap:8px;
  align-content:start;
}

/* Hier passe ich das Grid an, wenn eine Bewertung vollständig aufgeklappt ist. */
.lq-review-item.is-expanded{
  grid-template-rows:
    52px
    auto
    18px
    16px;
}

/* Hier gestalte ich den Kopfbereich der Bewertung mit Name und Sternen. */
.lq-review-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  flex-wrap:nowrap;
}

/* Hier gestalte ich den Namen der bewertenden Person.
   Ich lasse maximal zwei Zeilen zu und blende längere Namen sauber aus. */
.lq-review-name{
  margin:0;
  padding:0;
  font-weight:700;
  font-size:22px;
  color:#111;
  line-height:1.15;

  flex:1;
  min-width:0;

  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* Hier gestalte ich die Sterneanzeige im Kopfbereich. */
.lq-review-stars{
  display:flex;
  gap:5px;
  align-items:flex-start;
  align-self:flex-start;
  flex-shrink:0;
  padding-top:2px;
}

/* Hier definiere ich das Grunddesign der Sterne in der Bewertungsliste. */
.lq-review-stars .lq-star{
  font-size:28px;
  color:#d4d4d4;
  line-height:1;
}

/* Hier färbe ich aktive Sterne in der Akzentfarbe ein. */
.lq-review-stars .lq-star.is-on{
  color:#7a0f12;
}

/* Hier gestalte ich den eigentlichen Bewertungstext. */
.lq-review-text{
  margin:0;
  font-size:16px;
  color:#222;
  line-height:1.5;
  overflow-wrap:anywhere;
  word-break:break-word;
  min-height:48px;
  align-self:start;
}

/* Hier entferne ich unnötige Standardabstände innerhalb von Absätzen im Bewertungstext. */
.lq-review-text p{
  margin:0;
  line-height:inherit;
}

/* Hier setze ich einen kleinen Abstand zwischen mehreren Absätzen. */
.lq-review-text p + p{
  margin-top:6px;
}

/* Hier begrenze ich den Bewertungstext im eingeklappten Zustand auf zwei Zeilen. */
.lq-review-text.lq-clamp{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* Wenn die Karte aufgeklappt ist, entferne ich die Mindesthöhe des Textbereichs. */
.lq-review-item.is-expanded .lq-review-text{
  min-height:0;
}

/* Hier gestalte ich den Button "Mehr anzeigen".
   Standardmäßig ist er zunächst unsichtbar und nicht klickbar. */
.lq-more{
  margin:0;
  align-self:flex-start;
  background:transparent;
  border:0;
  padding:0;
  cursor:pointer;
  color:#7a0f12;
  font-weight:700;
  font-size:12.5px;
  line-height:1.2;
  text-decoration:underline;
  outline:none;
  box-shadow:none;

  display:inline-block;
  min-height:18px;

  visibility:hidden;
  opacity:0.9;
  pointer-events:none;
}

/* Hier blende ich den Link sichtbar ein, wenn er benötigt wird. */
.lq-more.is-visible{
  visibility:visible;
  opacity:1;
  pointer-events:auto;
}

/* Hier entferne ich die Standard-Fokuslinie des Buttons. */
.lq-more:focus{
  outline:none;
}

/* Hier gestalte ich den Hover-Zustand des Buttons. */
.lq-more:hover{
  opacity:0.8;
}

/* Hier definiere ich den sichtbaren Fokus-Zustand für Tastaturnavigation. */
.lq-more:focus-visible{
  outline:2px solid rgba(122,15,18,.35);
  outline-offset:3px;
  border-radius:8px;
}

/* Hier gestalte ich das Datum der Bewertung. */
.lq-review-date{
  margin:0;
  color:#6b6b6b;
  font-size:13px;
  line-height:1.2;
  min-height:16px;
  align-self:start;
}


/* =========================================================
   Tablet / iPad Anpassung
   ========================================================= */
@media (min-width: 769px) and (max-width: 1100px){

  /* Hier passe ich den Slider-Abstand für Tablet-Größen an. */
  .lq-review-slider{
    padding:0 78px;
  }

  /* Hier reduziere ich den Innenabstand des sichtbaren Bereichs leicht. */
  .lq-review-viewport{
    padding:14px 0 20px 0;
  }

  /* Auf Tablets zeige ich pro Ansicht nur eine Bewertungskarte gleichzeitig an. */
  .lq-review-slide{
    flex:0 0 100%;
    padding:10px 0 14px;
    display:flex;
  }

  /* Hier vergrößere ich die Navigationspfeile leicht für Tablet-Geräte. */
  .lq-slider-arrow{
    width:50px;
    height:50px;
  }

  /* Hier passe ich auch die Pfeilsymbole an. */
  .lq-slider-arrow::before{
    width:11px;
    height:11px;
    border-top:3px solid #fff;
    border-right:3px solid #fff;
  }

  /* Hier rücke ich den linken Pfeil etwas nach innen. */
  .lq-slider-prev{
    left:10px;
  }

  /* Hier rücke ich den rechten Pfeil etwas nach innen. */
  .lq-slider-next{
    right:10px;
  }

  /* Hier passe ich die Bewertungskarte für Tablet-Darstellung an. */
  .lq-review-item{
    min-height:188px;
    padding:16px 18px 10px;
    grid-template-rows:
      58px
      46px
      18px
      16px;
    row-gap:7px;
  }

  /* Hier passe ich das Grid im aufgeklappten Zustand an. */
  .lq-review-item.is-expanded{
    grid-template-rows:
      58px
      auto
      18px
      16px;
  }

  /* Hier ordne ich Kopfbereich und Sterne untereinander an,
     damit es auf Tablets besser wirkt. */
  .lq-review-head{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-start;
    gap:4px;
    min-height:58px;
  }

  /* Hier passe ich die Namensdarstellung für Tablets an. */
  .lq-review-name{
    max-width:100%;
    min-height:0;
    padding:0;
    font-size:22px;
    line-height:1.12;
    margin:0;
  }

  /* Hier passe ich die Sterneanzeige im Tablet-Layout an. */
  .lq-review-stars{
    display:flex;
    gap:5px;
    align-items:center;
    margin:0;
    line-height:1;
    padding:0;
  }

  /* Hier verkleinere ich die Sterne leicht für Tablets. */
  .lq-review-stars .lq-star{
    font-size:23px;
    line-height:1;
  }

  /* Hier passe ich den Bewertungstext für Tablets an. */
  .lq-review-text{
    font-size:16px;
    line-height:1.42;
    min-height:44px;
    margin:0;
  }

  /* Hier passe ich die Schriftgröße des "Mehr anzeigen"-Links an. */
  .lq-more{
    font-size:12.5px;
    min-height:18px;
    margin:0;
    line-height:1.2;
  }

  /* Hier passe ich die Datumsanzeige für Tablets an. */
  .lq-review-date{
    font-size:13px;
    min-height:16px;
    margin:0;
    line-height:1.2;
  }
}


/* =========================================================
   Mobile Anpassung für Slider
   ========================================================= */
@media (max-width: 768px){

  /* Hier reduziere ich die seitlichen Abstände des Sliders auf mobilen Geräten. */
  .lq-review-slider{
    padding:0 56px;
  }

  /* Hier passe ich den Innenabstand des sichtbaren Bereichs mobil an. */
  .lq-review-viewport{
    padding:16px 0 18px 0;
  }

  /* Auf Smartphones zeige ich immer nur eine Bewertungskarte pro Ansicht an. */
  .lq-review-slide{
    flex:0 0 100%;
    padding:8px 0 10px;
    display:flex;
  }

  /* Hier verkleinere ich die Navigationspfeile für mobile Geräte. */
  .lq-slider-arrow{
    width:40px;
    height:40px;
  }

  /* Hier verkleinere ich auch das Pfeilsymbol mobil. */
  .lq-slider-arrow::before{
    width:9px;
    height:9px;
    border-top:3px solid #fff;
    border-right:3px solid #fff;
  }

  /* Hier positioniere ich den linken Pfeil näher am Rand. */
  .lq-slider-prev{
    left:6px;
  }

  /* Hier positioniere ich den rechten Pfeil näher am Rand. */
  .lq-slider-next{
    right:6px;
  }

  /* Hier passe ich die Bewertungskarte an die mobile Darstellung an. */
  .lq-review-item{
    min-height:198px;
    padding:16px 14px 10px;
    grid-template-rows:
      78px
      44px
      18px
      14px;
    row-gap:8px;
  }

  /* Hier passe ich das Grid für den aufgeklappten Zustand mobil an. */
  .lq-review-item.is-expanded{
    grid-template-rows:
      78px
      auto
      18px
      14px;
  }

  /* Hier richte ich den Kopfbereich mobil mittig und untereinander aus. */
  .lq-review-head{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    gap:3px;
    min-height:0;
    text-align:center;
  }

  /* Hier passe ich die Namensdarstellung für Smartphones an.
     Der Name wird mittig dargestellt und kontrolliert begrenzt. */
  .lq-review-name{
    max-width:100%;
    font-size:19px;
    line-height:1.15;
    margin:0;
    padding:0;

    display:block;
    text-align:center;
    overflow:hidden;
    max-height:calc(2 * 1.15em + 6px);
    word-break:normal;
    overflow-wrap:break-word;

    -webkit-line-clamp:unset;
    -webkit-box-orient:unset;
  }

  /* Hier richte ich die Sterne mobil zentriert aus. */
  .lq-review-stars{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:5px;
    margin:0;
    line-height:1;
    padding:0;
    width:100%;
  }

  /* Hier verkleinere ich die Sterne leicht für Smartphones. */
  .lq-review-stars .lq-star{
    font-size:22px;
    line-height:1;
  }

  /* Hier passe ich den Bewertungstext für Smartphones an. */
  .lq-review-text{
    font-size:15px;
    line-height:1.42;
    min-height:42px;
    margin:0;
    text-align:center;
    align-self:start;
  }

  /* Hier entferne ich unnötige Standardabstände in mobilen Absätzen. */
  .lq-review-text p{
    margin:0;
    line-height:inherit;
  }

  /* Hier reduziere ich den Abstand zwischen mehreren Absätzen mobil leicht. */
  .lq-review-text p + p{
    margin-top:4px;
  }

  /* Im aufgeklappten Zustand entferne ich auch mobil die Mindesthöhe. */
  .lq-review-item.is-expanded .lq-review-text{
    min-height:0;
  }

  /* Hier zentriere ich den Link "Mehr anzeigen" auf mobilen Geräten. */
  .lq-more{
    font-size:12px;
    min-height:18px;
    margin:0 auto;
    line-height:1.2;
    align-self:center;
    text-align:center;
  }

  /* Hier zentriere ich auch das Datum mobil und passe die Größe an. */
  .lq-review-date{
    font-size:12px;
    min-height:14px;
    margin:0 auto;
    line-height:1.2;
    text-align:center;
    align-self:center;
  }
}